import TmBadge from '@teld/q-components/Badge';
import TPopupProxy from 't/basic/popup-proxy';
import TmButton from 't/basic/button';
import TmDialog from 't/basic/dialog';
import TmIcon from 't/basic/icon';
import TmLabel from 't/basic/label';
import TmList from 't/basic/list';
import TmSearch from 't/basic/input';
import TTabPanels from 't/basic/tab-panels';
import TToggle from 't/basic/toggle';
import TmPopover from './popover.jsx';
import TCard from 't/basic/card';
import TCardSection from 't/basic/card/CardSection.jsx';
import TCardAction from 't/basic/card/CardActions.jsx';
import TChips from 't/basic/chips';
import { useQuasar } from '@teld/q-components';
import TmTabs from 't/basic/tabs';
import useMappingProps from 't/common/hooks/useMappingProps';
import { useGenerateIcon } from './hock/useGenerateElement.jsx';
import NoDataImage from '../../repeat/no-data-image.vue';
import draggable from 't/third-party/vuedraggable';
import TInput from 't/basic/input';
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  ref,
  toRefs,
  watch,
  onBeforeUnmount,
} from 'vue';
import TmSelectHelper from '../../select-helper/Component';
import './index.scss';
import subWarning from './queryplan/subWarning';
import { FilterExpression } from '../covert.js';
export const queryPlanProps = {
  filterServer: Array,
  dataQuery: String,
  isDev: Boolean,
  showSubWarning: String,
};

import FilterContent from './filter/filterContent';
import FilterPreview from './filter/filterPreview';
import queryPlanComponent from './queryplan/queryPlan.jsx';
import { generateComContains } from './filter/generateComContains.jsx';
export default defineComponent({
  name: 'TQueryPlanM',
  components: {
    TmIcon,
    TPopupProxy,
    TmBadge,
    TmTabs,
    TmPopover,
    queryPlanComponent,
    TmButton,
    TmList,
    FilterPreview,
    FilterContent,
    TmLabel,
    TmSelectHelper,
    subWarning,
    TmDialog,
    TToggle,
    TTabPanels,
    TmSearch,
    TCard,
    TCardSection,
    TCardAction,
    TChips,
    draggable,
    TInput
  },
  props: {
    ...queryPlanProps,

    pageID: String,
    pageName: String,
    pageCode: String,
    visible: {
      type: Boolean,
      default() {
        return true;
      },
    },
    // 是否独占一行
    exclusiveLine: {
      type: String,
      default() {
        return '0';
      },
    },
    onlyShowIcon: {
      type: Boolean,
      default() {
        return true;
      },
    },
    staticItems: {
      type: Array,
      default() {
        return [
          {
            label: '筛选条件',
            ID: '1',
            isEnable: true,
            description:
              '在移动端方案高级筛选下显示条件管理tabs，支持提哦啊贱的修改与保存',
          },
          {
            ID: '2',
            label: '筛选方案',
            isEnable: true,
            description:
              '在移动端方案高级筛选下显示筛选方案tabs，支持方案的快速切换以及条件预览',
          },
          {
            ID: '3',
            label: '方案管理',
            isEnable: true,
            description:
              '在移动端方案高级筛选下显示方案管理tabs，支持方案的删除，编辑，置顶，订阅等操作',
          },
        ];
      },
    },
  },

  setup(props, { emit, attrs, expose, refs }) {
    const $q = useQuasar();
    const isShowPlanManger = ref(true);
    if (props.isDev)
      return () => {
        if (props.exclusiveLine == '1') {
          return (
            <div style='display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 12px;height:32px;line-height:32px;'>
              <div class={'plan_content_mobile'}>
                <span
                  class='isNotChecked'
                  style={
                    'border-radius: 2px; font-size: 12px; height: 24px; padding: 4px 8px; display: flex; align-items: center; line-height: 24px; flex: 0 0 auto; background: rgb(240, 242, 245);'
                  }
                >
                  方案1
                </span>
                <span
                  class='isChecked'
                  style={
                    'border-radius: 2px; font-size: 12px; height: 24px; padding: 4px 8px; display: flex; align-items: center; line-height: 24px; flex: 0 0 auto; background: rgb(240, 242, 245);'
                  }
                >
                  方案2
                </span>
                <span
                  class='isNotChecked'
                  style={
                    'border-radius: 2px; font-size: 12px; height: 24px; padding: 4px 8px; display: flex; align-items: center; line-height: 24px; flex: 0 0 auto; background: rgb(240, 242, 245);'
                  }
                >
                  方案3
                </span>
              </div>
              <i
                style={
                  'position:relative;    flex: none; display: flex;gap: 4px;    font-size: 10px;width: 40px;justify-content: center;align-items: center;'
                }
                class={'fas dx-icon icon-t-filter'}
                onClick={() => {}}
              >
                {!props.onlyShowIcon ? $q.lang.label.t_filter : ''}
              </i>
            </div>
          );
        }
        return (
          <div style={'height:32px;line-height:32px;display:inline-block;'}>
            <i
              style={
                'position:relative;    flex: none; display: flex;gap: 4px;    font-size: 11px;width: 40px;justify-content: center;align-items: center;'
              }
              class={'fas dx-icon icon-t-filter'}
              onClick={() => {}}
            >
              {!props.onlyShowIcon ? $q.lang.label.t_filter : ''}
            </i>
          </div>
        );
      };
    const refQueryPlanM = ref(null);
    const initedData = ref({});
    const isFilterContentChage = ref(false);
    const isFirstLoad = ref(true);
    let diff = 0;
    let clientHeight = window.innerHeight + 'px';
    document.documentElement.style.setProperty(
      '--t-client-height-p',
      clientHeight,
    );
    window.addEventListener('resize', function (event) {
      let mappingData = [
        $q.lang.queryPlan.mobile.filterCondition,
        $q.lang.queryPlan.mobile.filterPlan,
        $q.lang.queryPlan.mobile.planManager,
      ];

      let res = mappingProps.staticItems
        .map((item, index) => {
          // return [{"label":"筛选条件","ID":"1","isEnable":true,"description":"在移动端方案高级筛选下显示条件管理tabs，支持提哦啊贱的修改与保存"},{"ID":"2","label":"筛选方案","isEnable":true,"description":"在移动端方案高级筛选下显示筛选方案tabs，支持方案的快速切换以及条件预览"},{"ID":"3","label":"方案管理","isEnable":true,"description":"在移动端方案高级筛选下显示方案管理tabs，支持方案的删除，编辑，置顶，订阅等操作"}];

          return {
            ...item,
            label: mappingData[index],
            code: item.ID,
          };
        })
        .filter(item => item.isEnable);
      if (!res.length) {
        res.push({
          label: '筛选条件',
          ID: '1',
          isEnable: true,
          description:
            '在移动端方案高级筛选下显示条件管理tabs，支持提哦啊贱的修改与保存',
        });
      }
      let diff = 0;
      if (res.length == 1) {
        diff = 34 + 16 + 12;
      }
      clientHeight = window.innerHeight + diff + 'px';
      document.documentElement.style.setProperty(
        '--t-client-height-p',
        clientHeight,
      );
    });

    // const showConfirmDialog = $q.dialog;
    const showNotify = $q.notify;
    const shareDetile = ref({});
    const { filterServer, dataQuery, pageID, pageName, pageCode } =
      toRefs(props);
    const dataQueryID = ref(
      dataQuery.value ? JSON.parse(dataQuery.value).dataQueryID : null,
    );
    const LoadDataTime = ref(
      dataQuery.value ? JSON.parse(dataQuery.value).LoadDataTime : false,
    );
    const isComplex = ref(false);
    const sortCode = ref('PlanOrder');
    const handleClick = e => {
      if (e) {
        let rect = e.target.getBoundingClientRect();
        topSize.value = rect.top + rect.height + 10 + 'px';
        document.documentElement.style.setProperty(
          '--queryplan-dialog-top',
          '20vh',
          // topSize.value,
        );
      }
     let mappingData = [
        $q.lang.queryPlan.mobile.filterCondition,
        $q.lang.queryPlan.mobile.filterPlan,
        $q.lang.queryPlan.mobile.planManager,
      ];

       if (computedStatic.value.length == 1) {
          diff = 34 + 16 + 12;
          clientHeight = window.innerHeight + diff + 'px';
          document.documentElement.style.setProperty(
            '--t-client-height-p',
            clientHeight,
          );
        }else{
          document.documentElement.style.setProperty(
            '--t-client-height-p',
            window.innerHeight  + 'px',
          );
        }
      
      const BeforeQuery = {};
      emit('beforeQuery', BeforeQuery);
      if (typeof BeforeQuery === 'object' && BeforeQuery.cancel) {
        return;
      }
      TabsRef.value && (TabsRef.value.currentTabIndex = 0);
      showPopup.value = !showPopup.value;
    };

    const submitData = () => {
      emit('changed', {
        hasAuth: hasAuth(),
        status: getSubStarus(),
      });
      CreateOrUpdateQueryPlan(false, modifyPlan.value);
      showPopup.value = false;
      currectPlan.value = Object.assign({}, modifyPlan.value);
      // UpdateRepeatFilter();
    };

    const showPopup = ref(false);
    const planChanged = ref(false);

    const active = ref(0);
    const actions = [
      { text: $q.lang.queryPlan.title.defautSort, value: 'PlanOrder' },
      { text: $q.lang.queryPlan.title.descSort, value: 'plan.Name desc' },
      { text: $q.lang.queryPlan.title.aseSwort, value: 'plan.Name asc' },
    ];
    const showPopover = ref(false);
    const showOperateMore = ref(false);
    const onSelect = e => {
      sortCode.value = e.value;
      console.log(e);
    };

    watch(
      () => sortCode.value,
      async () => {
        //刷新方案列表
        queryPlanList.value = await getQueryPlanList();
      },
    );
    setTimeout(() => {
      planChanged.value = true;
    }, 3000);
    const queryPlanList = ref([]);
    //pageID
    // const pageId = ref('32409f1b-6da2-4a44-a6a1-130c51bc1a4b');
    //暂存当前方案
    const currectPlan = ref(null);
    const modifyPlan = ref(null);
    const _filter = ref({});
    const notReload = ref(true);
    const openSubWarning = ref(false);
    const showShareDetil = ref(false);
    const operateMoreByButton = async e => {
      emit('changed', {
        hasAuth: hasAuth(),
        status: getSubStarus(),
      });
      if (e.value == 'run') {
        UpdateRepeatFilter();

        showPopup.value = false;
      } else if (e.value == 'save') {
        CreateOrUpdateQueryPlan(false, modifyPlan.value);

        showPopup.value = false;
        // planOperate({ type: e.value, plan: modifyPlan.value });
      } else if (e.value == 'saveAs') {
        // CreateOrUpdateQueryPlan(true, modifyPlan.value);
        planOperate({ type: e.value, plan: modifyPlan.value });
        // showPopup.value = false;
        // if (_filter.value && _filter.value.Filters) {
        //   _filter.value.Filters.forEach(ele => {
        //     if (!ele.Value) return;
        //     ele.Value = '';
        //     ele.ValueName = '';
        //   });
        // }
        notReload.value = false;
        // const id = modifyPlan.value.ID;
        // queryPlanList.value.forEach(item => {
        //   if (item.ID == id) {
        //     _filter.value = JSON.parse(item.FilterContent);
        //   }
        // });
        nextTick(() => {
          notReload.value = true;
        });
      } else if (e.value == 'clear') {
        _filter.value?.Filters.forEach(ele => {
          if (!ele.Value) return;
          ele.Value = '';
          ele.ValueName = '';
        });
      } else if (e.value == 'reset') {
        notReload.value = false;
        let id = modifyPlan.value.ID;
        // queryPlanList.value.forEach(item => {
        //   if (item.ID == id) {
        //     _filter.value = JSON.parse(item.FilterContent);
        //   }
        // });
        let plan = await GetQueryPlanV2(id);
        _filter.value = JSON.parse(plan.FilterContent);
        notReload.value = true;
        nextTick(() => {
          isFilterContentChage.value = false;
        });
      }

      showPopover.value = false;
    };
    const FilterGroups = ref([]);
    watch(
      () => modifyPlan.value,
      (newVal, oldVal) => {
        isComplex.value = false;
        if (!modifyPlan.value) return;
        if (modifyPlan.value && modifyPlan.value.FilterContent) {
          _filter.value = JSON.parse(modifyPlan.value.FilterContent);
        } else {
          _filter.value = {
            Filters: [],
          };
        }
        if (modifyPlan.value.FilterShow) {
          if (
            modifyPlan.value.FilterShow &&
            JSON.parse(modifyPlan.value.FilterShow).FilterModel == 'Comp'
          ) {
            isComplex.value = true;
          }
          FilterGroups.value =
            JSON.parse(modifyPlan.value.FilterShow).FilterGroups ||
            JSON.parse(modifyPlan.value.FilterShow).Filters ||
            [];

          // //eval("console.log('========FilterGroups.value==========',FilterGroups.value,modifyPlan.value.FilterShow)")
        }
        if ((oldVal && oldVal.ID != newVal.ID) || !oldVal) {
          if (modifyPlan.value && modifyPlan.value.ID != runingPlan.value.ID) {
            return (isFilterContentChage.value = false);
          }
          isFirstLoad.value = true;
          isFilterContentChage.value = false;

          if (window.resetFIrstLoad) {
            window.clearTimeout(window.resetFIrstLoad);
            window.resetFIrstLoad = null;
          }
          window.resetFIrstLoad = setTimeout(() => {
            isFirstLoad.value = false;
            window.clearTimeout(window.resetFIrstLoad);
            window.resetFIrstLoad = null;
          }, 2000);
          return;
        }
      },
      {
        deep: true,
        immediate: true,
      },
    );
    watch(
      () => _filter.value,
      () => {
        //  eval('console.log(isFirstLoad.value ,modifyPlan.value?.FilterContent == JSON.stringify(_filter.value),_filter.value,modifyPlan.value?.FilterContent)')
        if (modifyPlan.value.FilterContent == JSON.stringify(_filter.value))
          return;
        let FilterExpression = filterExpression.value;
        try {
          modifyPlan.value.FilterContent = JSON.stringify(_filter.value);
        } catch (error) {}
        try {
          let filterContent = getAllFilters();
          if (filterContent) {
            filterContent = JSON.parse(filterContent);
          }
          FilterGroups.value.forEach(item => {
            let target = _.cloneDeep(
              _filter.value.Filters.find(items => items.Code == item.Code),
            );

            if (!item.ID) {
              item.ID = filterContent.Filters.find(
                el => el.Code == item.Code,
              )?.ID;
            }
            if (target) {
              if (item.Condition == 'between') {
                if (target.ValueName && Array.isArray(target.ValueName)) {
                  if (!target.ValueName.join('')) {
                    target.ValueName = '';
                  }
                }
                if (target.Value && Array.isArray(target.Value)) {
                  if (!target.Value.join('')) {
                    target.Value = [];
                  }
                }
              }
              if (Array.isArray(target.Value)) {
                item.Value = target.Value;
                item.ValueName = target.ValueName;
              } else {
                item.Value = target.ValueName || target.Value;
                item.ValueName =
                  target.Value !== false &&
                  target.Value !== null &&
                  typeof target.Value !== 'undefined'
                    ? target.Value
                    : target.Value || target.ValueName;
              }
              target.ID = item.ID;
            } else {
              item.Value = null;
              item.ValueName = '';
            }
          });
          let addList = _filter.value.Filters.filter(
            items =>
              !FilterGroups.value.some(item => items.Code == item.Code) &&
              items.ElementType != 'Relation',
          );
          if (addList.length) {
            _.cloneDeep(addList).forEach(item => {
              item.Relation = 'and';
              item.Type = 'Filter';
              item.IsOff = false;
              if (!Array.isArray(item.Value)) {
                let temp = item.ValueName;
                item.ValueName =
                  item.Value !== false &&
                  item.Value !== null &&
                  typeof item.Value !== 'undefined'
                    ? item.Value
                    : item.Value || item.ValueName;
                item.Value = temp || item.Value;
              }

              let targetOrgin = filterContent.Filters.find(
                el => el.Code == item.Code,
              );
              if (targetOrgin) {
                item.ID = targetOrgin.ID;
              }
              FilterGroups.value.push(item);
            });
          }
          // eval('console.log("======FilterGroups.value=====",FilterGroups.value, _filter.value)')
          modifyPlan.value.FilterContent = JSON.stringify(_filter.value);
          modifyPlan.value.FilterShow = JSON.stringify({
            FilterModel: 'Classic',
            FilterGroups: FilterGroups.value.map(item => {
              if (item.Condition.indexOf('in') != -1) {
                if (Array.isArray(item.Value)) {
                  let tmp = item.Value;
                  item.Value = item.ValueName;
                  item.ValueName = tmp;
                }
              }
              return item;
            }),
          });
        } catch (error) {
          //eval('console.log(error)')
        }
        // try {
        //   if(  modifyPlan.value){
        //     let FilterShow =  modifyPlan.value.FilterShow?JSON.parse(
        //      modifyPlan.value.FilterShow,
        //    ):{}
        //    let filterProxy  =_filter.value.value.filter(item=>item.Value||item.ValueName||item.Condition=='isnotblank'||item.Condition=='isblank'||item.Type== 'Group')
        //    //eval('console.log(filterProxy)')
        //    FilterShow.FilterGroups=filterProxy
        //    if(modifyPlan.value.FilterShow !=JSON.stringify(FilterShow)){
        //      if(!FilterShow.FilterModel){
        //        FilterShow.FilterModel='Classic'
        //      }
        //      delete FilterShow.ElementType
        //      delete FilterShow.Filters

        //    FilterGroups.value=filterProxy
        //      modifyPlan.value.FilterShow = JSON.stringify(FilterShow)
        //    }

        //  }
        // } catch (error) {
        // }
        if (
          JSON.stringify(FilterExpression) ==
          JSON.stringify(filterExpression.value)
        )
          return;
        if (isFilterContentChage.value) {
          emit('planBeEdit', {
            editStatus: isFilterContentChage.value,
            hasAuthToSave:
              !(
                modifyPlan.value.PlanRange ||
                (!modifyPlan.value.PlanRange && modifyPlan.value.IsAuth)
              ) || modifyPlan.value.PlanRange == 3
                ? false
                : true,
            plan: modifyPlan.value,
          });
        }
        isFilterContentChage.value = true;
      },
      {
        deep: true,
      },
    );
    let tempFilterShow = null;
    watch(
      () => FilterGroups.value,
      () => {
        // eval("console.log(FilterGroups.value,_filter.value)")
      },
      {
        deep: true,
        immediate: true,
      },
    );

    const getQueryPlanList = async () => {
      if (window.TFF) {
        return TFF.common.ajax.getDataAsync({
          url: `${Funcs.FasRequestTagAdd(
            TFF.common.ajax.getServiceUrl('FASR-GetQueryPlanListV3'),
          )}`,
          type: 'post',
          data: {
            queryPlanFilter: JSON.stringify({
              DQID: dataQueryID.value,
              pageID: pageID.value, //window.pageMetaData.ID,
              sortCode: sortCode.value ? sortCode.value : 'PlanOrder',
              BusinessTag: Funcs.GetUrlQuery('BusinessTag'),
            }),
          },
        });
      } else {
        return new Promise(resolve => {
          resolve([]);
        });
      }
      // return planList;
    };
    const UpdateQueryPlan = async (queryPlanTarget, params) => {
      if (window.TFF) {
        TFF.common.ajax
          .getDataAsync({
            url: `${Funcs.FasRequestTagAdd(
              TFF.common.ajax.getServiceUrl('FASR-UpdateQueryPlan'),
            )}`,
            type: 'post',
            data: {
              planID: queryPlanTarget.ID,
              param: JSON.stringify(params),
            },
          })
          .then(async () => {
            queryPlanList.value = await getQueryPlanList();
          })
          .catch(e => {});
      }
    };
    //新增或编辑
    const CreateOrUpdateQueryPlan = async (
      isSaveAs,
      queryPlanTarget,
      backupName,
    ) => {
      queryPlanTarget = Object.assign({}, queryPlanTarget);
      if (modifyPlan.value.ID == queryPlanTarget.ID) {
        let modifyPlan_cloneDeep = _.cloneDeep(modifyPlan.value);
        queryPlanTarget.FilterContent = modifyPlan_cloneDeep.FilterContent;
        queryPlanTarget.FilterShow = modifyPlan_cloneDeep.FilterShow;
      }
      if (isSaveAs) {
        if (queryPlanTarget.ID != modifyPlan.value.ID) {
          let plan = await GetQueryPlanV2(queryPlanTarget.ID);

          queryPlanTarget.FilterContent = plan.FilterContent;
          queryPlanTarget.FilterShow = plan.FilterShow;
        }
        delete queryPlanTarget.ID;
        delete queryPlanTarget.WarningID;
        delete queryPlanTarget.IsSystem;
        // delete queryPlanTarget.ContentID
        queryPlanTarget.IsAuth = true;
        // queryPlanTarget.PlanRange ='1';
        // queryPlanTarget.IsDefault = false;
      }

      queryPlanTarget.DQID = dataQueryID.value;
      queryPlanTarget.PageID = pageID.value; //window.pageMetaData.ID
      queryPlanTarget.FilterContent = computedFilterExpression(
        queryPlanTarget,
        true,
      );
      if (window.TFF) {
        TFF.common.ajax
          .getDataAsync({
            url: `${Funcs.FasRequestTagAdd(
              TFF.common.ajax.getServiceUrl('FASR-CreateOrUpdateQueryPlanV2'),
            )}`,
            type: 'post',
            data: {
              queryPlan: JSON.stringify(queryPlanTarget),
              BusinessTag: Funcs.GetUrlQuery('BusinessTag'),
            },
          })
          .then(async res => {
            if (res.state == 0) {
              Funcs.Notify(
                $q.lang.selectHelper.warning,
                $q.lang.queryPlan.notify.fail.format(
                  isSaveAs
                    ? $q.lang.queryPlan.title.saveAs
                    : $q.lang.queryPlan.title.save,
                  res.message,
                ),
                'warning',
              );

              return;
            }
            Funcs.Notify(
              $q.lang.selectHelper.warning,
              $q.lang.queryPlan.notify.success.format(
                isSaveAs
                  ? $q.lang.queryPlan.title.saveAs
                  : $q.lang.queryPlan.title.save,
              ),
              'success',
            );

            queryPlanList.value = await getQueryPlanList();
            if (isSaveAs) {
              let plan = queryPlanList.value.find(
                item => item.ID == res.queryPlanID,
              );
              plan = await GetQueryPlanV2(plan.ID);
              plan.isReady = true;
              modifyPlan.value = Object.assign({}, plan);
              // currectPlan.value = Object.assign({}, plan);
              notReload.value = false;
              nextTick(() => {
                notReload.value = true;
              });
            }
            UpdateRepeatFilter();
            if (backupName) {
              // planName.value = targetName.value
            }
          })
          .catch(e => {
            Funcs.Notify(
              $q.lang.selectHelper.warning,
              $q.lang.queryPlan.notify.fail.format(
                isSaveAs
                  ? $q.lang.queryPlan.title.saveAs
                  : $q.lang.queryPlan.title.save,
                e.message,
              ),
              'warning',
            );
          });
      }
    };
    //置顶
    const TopQueryPlan = async queryplan => {
      if (window.TFF) {
        const params = {
          topType: queryplan.TopTime == '0001-01-01 00:00:00' ? 0 : 1,
          planID: queryplan.ID,
        };
        await TFF.common.ajax
          .getDataAsync({
            url: `${Funcs.FasRequestTagAdd(
              TFF.common.ajax.getServiceUrl('FASR-TopQueryPlan'),
            )}`,
            type: 'post',
            params,
          })
          .then(async res => {
            queryPlanList.value = await getQueryPlanList();
          });
      }
    };

    //批量保存（拖拽调整顺序）
    const SaveQueryPlans = async => {
      if (window.TFF) {
        let list = queryPlanList.value.map(item => {
          item.FilterContent = computedFilterExpression(item, true);

          return item;
        });
        TFF.common.ajax.getDataAsync({
          url: `${Funcs.FasRequestTagAdd(
            TFF.common.ajax.getServiceUrl('FASR-SaveQueryPlans'),
          )}`,
          type: 'post',
          data: {
            queryPlans: JSON.stringify(list),
          },
        });
      }
    };
    const CancleScheduleJobSubscription = subscriptionID => {
      return TFF.common.ajax.getDataAsync({
        url: `${Funcs.FasRequestTagAdd(
          TFF.common.ajax.getServiceUrl('FASR-CancleScheduleJobSubscription'),
        )}`,
        type: 'post',
        data: {
          subscriptionID: subscriptionID,
        },
      });
    };
    const deleteQueryPlan = async (planId, WarningID) => {
      if (window.TFF) {
        if (WarningID) {
          CancleScheduleJobSubscription(WarningID);
        }
        await TFF.common.ajax.getDataAsync({
          url: `${Funcs.FasRequestTagAdd(
            TFF.common.ajax.getServiceUrl('FASR-DeleteQueryPlan'),
          )}`,
          type: 'post',
          data: {
            id: planId,
          },
        });
      }
    };

    const operateMore = computed(() => {
      return modifyPlan.value?.IsAuth
        ? [
            {
              text: $q.lang.queryPlan.mobile.run,
              value: 'run',
            },
            { text: $q.lang.queryPlan.title.save, value: 'save' },
            { text: $q.lang.queryPlan.title.saveAs, value: 'saveAs' },
            // { text: $q.lang.queryPlan.mobile.clear, value: 'clear' },
            // { text: $q.lang.queryPlan.mobile.reset, value: 'reset' },
          ]
        : [
            { text: $q.lang.queryPlan.title.saveAs, value: 'saveAs' },
            // { text: $q.lang.queryPlan.mobile.clear, value: 'clear' },
            // { text: $q.lang.queryPlan.mobile.reset, value: 'reset' },
          ];
    });
    const targetName = ref('');

    const subPlan = ref(null);
    const saveAsPlan = ref();
    const sharePlan = ref({});
    const editPlan = ref(null);
    const selectHelper = ref(null);
    const showShare = ref(false);
    // const backupPlanIsChange = null
    const closePopup = () => {
      if (!showisFilter.value) {
        return (showisFilter.value = true);
      }
      if (editPlan.value) {
        modifyPlan.value = editPlan.value;
        editPlan.value = null;
        // planIsChange.value = backupPlanIsChange
        // backupPlanIsChange = null
      }
      showPopup.value = false;
    };
    const planOperate = async e => {
      if (e.type == 'sub') {
        openSubWarning.value = true;
        subPlan.value = e.plan;
      } else if (e.type == 'edit') {
        // editPlan.value = _.cloneDeep(modifyPlan.value);
        FilterGroups.value && (FilterGroups.value = []);
        _filter.value && (_filter.value.Filters = []);
        if (e.plan?.ID && e.plan?.ID != modifyPlan.value.ID) {
          e.plan = await GetQueryPlanV2(e.plan?.ID);
        }
        // editPlan.value = _.cloneDeep( e.plan);
        showisFilter.value = true;

        editPlan.value = modifyPlan.value = Object.assign({}, e.plan);
        TabsRef.value && (TabsRef.value.currentTabIndex = 0);
        // backupPlanIsChange = planIsChange.value
        // planIsChange.value=false
        notReload.value = false;
        nextTick(() => {
          notReload.value = true;
        });
      } else if (e.type == 'rename') {
        renameProxy.value = Object.assign({}, e.plan);
        targetName.value = JSON.parse(JSON.stringify(e.plan)).Name;
        return (showRenameDialog.value = true);
      } else if (e.type == 'saveAs') {
        saveAsPlan.value = Object.assign(
          {},
          e.plan.ID == modifyPlan.value.ID ? modifyPlan.value : e.plan,
        );
        const plan = Object.assign({}, e.plan);
        targetName.value = plan.Name + '_copy';
        isPublic.value = plan.PlanRange == '0' && plan.IsAuth;
        isDefault.value = false;
        return (showDialog.value = true);
      } else if (e.type == 'share') {
        if (!e.plan.ShareUsers || !e.plan.ShareUsers.length) {
          let ShareUsers = await GetQueryPlanV2(e.plan.ID);
          e.plan.ShareUsers = ShareUsers.ShareUsers || [];
        }
        sharePlan.value = JSON.parse(JSON.stringify(e.plan));
        showShare.value = true;
      } else if (e.type == 'top') {
        TopQueryPlan(e.plan);
      } else if (e.type == 'default') {
        e.plan.IsDefault = !e.plan.IsDefault;
        await UpdateQueryPlan(e.plan, {
          Default: e.plan.IsDefault,
        });
      } else if (e.type == 'delete') {
        await deleteQueryPlan(e.plan.ID, e.plan.WarningID);
        // if (
        //   e.plan.ID == modifyPlan.value.ID &&
        //   e.plan.ID == currectPlan.value.ID
        // ) {
        //   modifyPlan.value = currectPlan.value = null;
        // }
        getQueryPlanList().then(res => {
          queryPlanList.value = res;
          if (
            e.plan.ID == modifyPlan.value.ID &&
            e.plan.ID == currectPlan.value.ID
          ) {
            modifyPlan.value = currectPlan.value = null;
            getDefaultPlan();
          }
        });
      } else if (e.type == 'shareDetail') {
        if (!e.plan.ShareUsers || !e.plan.ShareUsers.length) {
          let ShareUsers = await GetQueryPlanV2(e.plan.ID);
          e.plan.ShareUsers = ShareUsers.ShareUsers || [];
        }
        shareDetile.value = e.plan;
        showShareDetil.value = true;
      }
    };
    if (!props.isDev) {
      getQueryPlanList().then(res => {
        queryPlanList.value = res;
        getDefaultPlan();
      });
    }
    const showisFilter = ref(true);
    const isOpacity = ref(true);
    //条件还原
    const initData = () => {
      // isOpacity.value = false;
      checkPlan();
    };
    const GetQueryPlanV2 = planId => {
      //@ts-ignore
      return TFF.common.ajax.getDataAsync({
        //@ts-ignore
        url: `${Funcs.FasRequestTagAdd(
          //@ts-ignore
          TFF.common.ajax.getServiceUrl('FASR-GetQueryPlanV2'),
        )}`,
        type: 'post',
        data: {
          planId: planId,
        },
      });
    };
    const queryPlanByShareUrl = ref({});
    let UpdateRepeatFilterTimer = null;
    const UpdateRepeatFilter = () => {
      if (UpdateRepeatFilterTimer) {
        if (LoadDataTime.value) {
          LoadDataTime.value = false;
        }
        window.clearTimeout(UpdateRepeatFilterTimer);
        UpdateRepeatFilterTimer = null;
      }

      //
      UpdateRepeatFilterTimer = window.setTimeout(() => {
        if (runingPlan.value.ID != modifyPlan.value.ID) {
          runingPlan.value = _.cloneDeep(modifyPlan.value);
          setTimeout(() => {
            scrollToCurrenct(runingPlan.value);
          }, 100);
        }
        let filters = JSON.parse(_.cloneDeep(filterExpression.value));
        const apply = {
          cancel: false,
          queryPlan: _.cloneDeep(modifyPlan.value),
          filterExpression: filters,
        };
        emit('apply', apply);
        if (apply.cancel) {
          return;
        }
        if (LoadDataTime.value) {
          return (LoadDataTime.value = false);
        }
        setTimeout(() => {
          if (
            mappingProps.dataQuery &&
            JSON.parse(mappingProps.dataQuery).ActionType == 2
          ) {
            emit('UpdateRepeatFilter', zipFasDynamicFilter());
          } else {
            emit('UpdateRepeatFilter', JSON.stringify(filters));
          }
        }, 50);
      }, 100);
    };
    const getDefaultPlan = async () => {
      const queryIdByWarningUrl = Funcs.GetUrlQuery('PlanId');
      if (queryIdByWarningUrl) {
        //列表循环

        const defaultPlan = queryPlanList.value.filter(item => {
          if (item.ID == queryIdByWarningUrl) {
            return item;
          }
        });
        //不存在 查询一遍
        if (!defaultPlan || defaultPlan.length == 0) {
          //@ts-ignore

          queryPlanByShareUrl.value = await GetQueryPlanV2(queryIdByWarningUrl);
          if (queryPlanByShareUrl.value) {
            queryPlanByShareUrl.value.PlanRange = 3;
            queryPlanList.value.forEach(item => {
              if (
                item.PlanRange == queryPlanByShareUrl.value.PlanRange &&
                item.Name == queryPlanByShareUrl.value.Name
              ) {
                queryPlanByShareUrl.value.Name =
                  queryPlanByShareUrl.value.Name +
                  `(${$q.lang.queryPlan.viewBySub})`;
              }
            });
            queryPlanByShareUrl.value.IsAuth = false;
            queryPlanByShareUrl.value.IsDefault = false;
            queryPlanByShareUrl.value.isfromShare = true;

            currectPlan.value = Object.assign({}, queryPlanByShareUrl.value);
            modifyPlan.value = Object.assign({}, queryPlanByShareUrl.value);
            queryPlanList.value.unshift(queryPlanByShareUrl.value);
            runingPlan.value = Object.assign({}, defaultPlan[0]);
            scrollToCurrenct(runingPlan.value);
            UpdateRepeatFilter();
            return;
          }
        } else {
          const plans = await GetQueryPlanV2(queryIdByWarningUrl);
          currectPlan.value = Object.assign({}, plans);
          modifyPlan.value = Object.assign({}, plans);
          runingPlan.value = Object.assign({}, plans);
          scrollToCurrenct(runingPlan.value);
          UpdateRepeatFilter();
          return;
        }
      }

      const defaultPlanList = queryPlanList.value.filter(
        item => item.IsDefault || item.IsSystem,
      );

      let defaultPlan = {};
      if (defaultPlanList.length > 1) {
        defaultPlan = defaultPlanList.find(item => !item.IsSystem);
      } else {
        defaultPlan = defaultPlanList[0];
      }
      if (!defaultPlan) {
        defaultPlan = queryPlanList.value.find(item => item.IsSystem);
      }
      currectPlan.value = Object.assign({}, defaultPlan);
      modifyPlan.value = Object.assign({}, defaultPlan);
      isComplex.value = false;
      if (modifyPlan.value.FilterShow) {
        if (
          modifyPlan.value.FilterShow &&
          JSON.parse(modifyPlan.value.FilterShow).FilterModel == 'Comp'
        ) {
          isComplex.value = true;
        }
      }
      initData();
      //UpdateRepeatFilter();
    };
    const searchFilter = ref('');
    watch(
      () => searchFilter.value,
      () => {
        console.log(searchFilter.value);
      },
    );
    const queryPlanByFilter = computed(() => {
      if (searchFilter.value) {
        debugger;
        return queryPlanList.value.filter(item => {
          if (!item.Name) {
            return false;
          }
          if (item.Name.indexOf(searchFilter.value.trim()) != -1) {
            if (item.IsSystem && item.IsAuth) {
              return true;
            } else if (item.IsSystem) {
              return false;
            }
            return true;
          }
          return false;
        });
      }
      return queryPlanList.value.filter(item => {
        if (item.IsSystem && item.IsAuth && item.Name) {
          return true;
        } else if (item.IsSystem && item.Name) {
          return false;
        }
        return item.Name ? true : false;
      });
    });

    const openChnage = ref(false);

    const shareToOther = async (shareList, plan) => {
      if (!shareList) return (showShare.value = false);
      const shareUsers = [];
      shareList.forEach(item => {
        const obj = {
          UserID: item.UserID,
          UserName: item.RealName,
        };
        shareUsers.push(obj);
      });
      if (window.TFF) {
        const data = await TFF.common.ajax.getDataAsync({
          url: `${Funcs.FasRequestTagAdd(
            TFF.common.ajax.getServiceUrl('FASR-ShareQueryPlan'),
          )}`,
          type: 'post',
          data: {
            queryPlan: JSON.stringify(plan),
            shareUsers: JSON.stringify(shareUsers),
            BusinessTag: Funcs.GetUrlQuery('BusinessTag'),
          },
        });
        queryPlanList.value = await getQueryPlanList();
        modifyPlan.value.ShareUsers = shareUsers;
        modifyPlan.value.PlanRange = 2;
        showShare.value = false;
      }
    };

    const filterExpression = computed(() => {
      if (!modifyPlan.value) return;
      return computedFilterExpression(modifyPlan.value);
    });
    const getAllFilters = () => {
      let FilterContent = JSON.parse(modifyPlan.value.FilterContent);
      FilterContent.Filters.forEach(element => {
        let target = filterServer.value.find(
          item => element.Code == `${item.tableAlias}.${item.fieldAlias}`,
        );
        if (target) {
          element.ID = target.ID;
        }
      });
      filterServer.value
        .filter(
          item =>
            item.isQuery &&
            !FilterContent.Filters.some(
              el => el.Code == `${item.tableAlias}.${item.fieldAlias}`,
            ),
        )
        .forEach(item => {
          if (FilterContent.Filters.length) {
            FilterContent.Filters.push({
              ElementType: 'Relation',
              Relation: 'and',
            });
          }
          FilterContent.Filters.push({
            ID: item.ID,
            ElementType: 'Filter',
            Code: `${item.tableAlias}.${item.fieldAlias}`,
            Condition: item.field_condition ? item.field_condition[0] : '=',
            ValueType: 0,
            Name: item.fieldName,
            Value: null,
            ValueName: '',
            DataType: item.dataType,
          });
        });
      return JSON.stringify(FilterContent);
    };
    const computedFilterExpression = (plan, onlyRemoveEmpy) => {
      let Filters = JSON.parse(JSON.stringify(plan));

      if (!Filters.FilterContent) {
        return JSON.stringify({ ElementType: 'Group', Filters: [] });
      }
      let FilterContent = JSON.parse(Filters.FilterContent);
      if (!FilterContent?.Filters) {
        FilterContent = { ElementType: 'Group', Filters: [] };
      }
      let Filter = FilterContent?.Filters || [];
      if (!isComplex.value) {
        FilterContent.Filters = FilterContent.Filters.filter(item => {
          if (item.ElementType == 'Relation') return false;
          let target =
            FilterGroups?.value?.find(items => items.Code == item.Code) || {};
          if (
            target &&
            (target.Condition == 'isnotblank' || target.Condition == 'isblank')
          ) {
            return true;
          }

          if (
            item.Value &&
            item.Value.join &&
            item.Value.join('').trim() == ''
          ) {
            return false;
          }
          if (item.Value === '' || item.Value === null) return false;

          return true;
        });
        Filter = [];
        FilterContent.Filters.map((item, index) => {
          Filter.push(item);
          if (index != FilterContent.Filters.length - 1) {
            Filter.push({
              ElementType: 'Relation',
              Relation: 'and',
            });
          }
        });
      }

      FilterContent.Filters = Filter;
      Filters.FilterContent = JSON.stringify(FilterContent);
      if (onlyRemoveEmpy) {
        return JSON.stringify(FilterContent);
      }
      return FilterExpression(
        Filters,
        filterServer.value,
        !isFilterContentChage.value,
      );
    };
    const zipFasDynamicFilter = (o, Filters) => {
      if (!Filters) Filters = filterExpression.value;
      if (!Filters) Filters = [];
      if (!o) o = {};
      let _Filters = Filters.push ? Filters : [JSON.parse(Filters)];
      _.transform(
        _Filters,
        (r, v) => {
          if (v.ElementType == 'Filter') {
            r[_.last(v.Code.split('.'))] = v.Value;
          } else if (v.ElementType == 'Group') {
            zipFasDynamicFilter(o, v.Filters);
          }
        },
        o,
      );
      return o;
    };
    const checkPlan = isNotify => {
      UpdateRepeatFilter();
      if (isNotify) {
        setTimeout(() => {
          emit('changed', {
            hasAuth: hasAuth(),
            status: getSubStarus(),
          });
        }, 50);
      }

      showPopup.value = false;
      showisFilter.value = true;
    };
    const showDialog = ref(false);
    const isPublic = ref(false);
    const isDefault = ref(false);
    const deleteEmptRelation = plan => {
      let FilterContent = JSON.parse(plan.FilterContent);
      FilterContent.Filters = FilterContent.Filters.filter(
        item =>
          item.ElementType != 'Relation' &&
          item.Value !== '' &&
          item.Value.join &&
          item.Value.join('') !== '',
      );
      let Filter = [];
      FilterContent.Filters.map((item, index) => {
        Filter.push(item);
        if (index != FilterContent.Filters.length - 1) {
          Filter.push({
            ElementType: 'Relation',
            Relation: 'and',
          });
        }
      });

      return JSON.stringify(Filter);
    };
    const hasAuth = plan => {
      if (!plan) {
        plan = modifyPlan.value;
      }
      return !!(
        ((plan.PlanRange || (!plan.PlanRange && plan.IsAuth)) &&
          plan.PlanRange != 3) ||
        plan.WarningID
      );
    };
    const getSubStarus = plan => {
      if (!plan) {
        plan = modifyPlan.value;
      }
      if (plan.IsAuth && plan.WarningID) {
        return 'cancel';
      } else if (plan.IsAuth && !plan.WarningID) {
        return 'subWarn';
      } else if (
        !plan.IsAuth &&
        (!plan.PlanRange || plan.PlanRange == 3) &&
        plan.WarningID
      ) {
        return 'viwSubWarn';
      } else if (
        !plan.IsAuth &&
        (plan.PlanRange == 1 || plan.PlanRange == 2) &&
        plan.WarningID
      ) {
        return 'cancel';
      }
    };
    const runingPlan = ref({});
    watch(
      () => runingPlan.value,
      (newData, oldData) => {
        if (isFilterContentChage.value) {
          return;
        }
        if (!oldData) {
          return emit('change', modifyPlan.value);
        } else if (newData.ID != oldData.ID) {
          return emit('change', modifyPlan.value);
        } else if (newData.ID == oldData.ID) {
          return emit('changed', {
            hasAuth: hasAuth(),
            status: getSubStarus(),
          });
        }
      },
      {},
    );
    watch(
      () => isFilterContentChage.value,
      () => {
        if (!modifyPlan.value) {
          return;
        }
        emit('planBeEdit', {
          editStatus: isFilterContentChage.value,
          hasAuthToSave:
            !(
              modifyPlan.value.PlanRange ||
              (!modifyPlan.value.PlanRange && modifyPlan.value.IsAuth)
            ) || modifyPlan.value.PlanRange == 3
              ? false
              : true,
          plan: modifyPlan.value,
        });
      },
    );
    const refTPopupProxy = ref(null);
    const fn = event => {
      // event.preventDefault()
      event.stopPropagation();
      return false;
    };
    const addEventListener_touch = node => {
      if (!node) return;
      try {
        // 为 touchstart 事件添加监听器
        node.addEventListener('touchstart', fn, true); // true 表示在捕获阶段触发

        // 为 touchmove 事件添加监听器
        node.addEventListener('touchmove', fn, true);

        // 为 touchend 事件添加监听器
        node.addEventListener('touchend', fn, true);
      } catch (error) {}
    };
    const removeEventListener_touch = node => {
      if (!node) return;
      try {
        // 为 touchstart 事件添加监听器
        node.removeEventListener('touchstart', fn, true); // true 表示在捕获阶段触发

        // 为 touchmove 事件添加监听器
        node.removeEventListener('touchmove', fn, true);

        // 为 touchend 事件添加监听器
        node.removeEventListener('touchend', fn, true);
      } catch (error) {}
    };

    watch(
      () => showPopup.value,
      () => {
        if (showPopup.value) {
          isFirstLoad.value = true;
          TabsRef.value && (TabsRef.value.currentTabIndex = 0);
          refTPopupProxy.value.show();

          nextTick(() => {
            addEventListener_touch(
              document.querySelector(
                '.select_helper_popup.select_helper_popup_m.queryplanmanage',
              ),
            );
            isFirstLoad.value = false;
          });
        } else {
          removeEventListener_touch(
            document.querySelector(
              '.select_helper_popup.select_helper_popup_m.queryplanmanage',
            ),
          );
          refTPopupProxy.value.hide();
          TabsRef.value && (TabsRef.value.currentTabIndex = 1);
        }
      },
    );
    // queryPlanList.value = getQueryPlanList();
    const TabsRef = ref({
      currentTabIndex: 1,
    });

    const sortRef = ref(null);
    const showRenameDialog = ref();
    const renameProxy = ref();
    const topSize = ref('0');
    const showExpand = ref(false);
    const updateQueryPlanList = (type, data) => {
      let queryPlanInfo = {
        top: queryPlanList.value.filter(
          item => item.TopTime != '0001-01-01 00:00:00',
        ),
        public: queryPlanList.value.filter(
          item => item.TopTime == '0001-01-01 00:00:00' && item.PlanRange == 0,
        ),
        previte: queryPlanList.value.filter(
          item => item.TopTime == '0001-01-01 00:00:00' && item.PlanRange != 0,
        ),
      };
      queryPlanInfo[type] = data;
      queryPlanList.value = [
        ...queryPlanInfo.top,
        ...queryPlanInfo.public,
        ...queryPlanInfo.previte,
      ];
      if (window.SaveQueryPlansDelay) {
        window.clearTimeout(window.SaveQueryPlansDelay);
        window.SaveQueryPlansDelay = null;
      }
      window.SaveQueryPlansDelay = window.setTimeout(() => {
        SaveQueryPlans();
      }, 500);
    };
    const scrollToCurrenct = (nums) => {
      if(!nums) {
        nums = 0 
      }
      if (
        modifyPlan.value &&
        document.querySelector(`#id_${modifyPlan.value.ID.replace(/-/gi, '')}`)
      ) {
        if (runingPlan.value.ID != modifyPlan.value.ID) {
          runingPlan.value = modifyPlan.value;
        }
        document
          .querySelector(`#id_${modifyPlan.value.ID.replace(/-/gi, '')}`)
          .scrollIntoView({
            behavior: 'auto', // 滚动行为，可以是 'auto' 或 'smooth'
            block: 'nearest', // 垂直方向的对齐方式，可以是 'start', 'center', 'end', 或 'nearest'
            inline: 'start', // 水平方向的对齐方式，可以是 'start', 'center', 'end', 或 'nearest'
          });
      } else {
        setTimeout(() => {
          nums++
          if (nums > 20) {
            return; 
          }
          scrollToCurrenct(nums);
        }, 100);
      }
    };
    const formatDataByQuickFilter = item => {};
    const [mappingProps, mappingExpose] = useMappingProps(props, {
      query: UpdateRepeatFilter,
      Query: UpdateRepeatFilter,
      updateRepeatFilter: UpdateRepeatFilter,
      getDependParas: data => {
        let response = {};
        //子集数据
        if (window.Proxy_Filter && window.Proxy_Filter.RelationCondition) {
          let relationList = window.Proxy_Filter.RelationCondition[data];
          if (!relationList) {
            return response;
          }
          const FilterContent = JSON.parse(modifyPlan.value.FilterContent);
          FilterContent?.Filters?.forEach(el => {
            if (relationList.includes(el.Code)) {
              response[el.Code] = el.Value;
            }
          });
        }
        return response;
      },
      filterExpression,
      zipFasDynamicFilter,
      updateByFilter: QuickFilterInstance => {
        if (
          !QuickFilterInstance ||
          !QuickFilterInstance.getAllFilters() ||
          isComplex.value
        )
          return;
        // TabsRef.value && (TabsRef.value.currentTabIndex = 1);
        /**
         * [{code:'',value}]
         */
        let filter = modifyPlan.value.FilterContent;
        try {
          filter = JSON.parse(filter);
        } catch (error) {
          filter = {};
        }
        let hasChange = false;
        let filterList = JSON.parse(
          QuickFilterInstance.getAllFilters(),
        ).Filters;
        if (filter.Filters) {
          let newFilter = filterList.filter(
            item =>
              !filter.Filters.some(el => el.Code == item.Code) &&
              item.ElementType != 'Relation' &&
              item.Name,
          );
          filterList = filterList.filter(item =>
            filter.Filters.some(el => el.Code == item.Code && item.Name),
          );
          filter.Filters.forEach(item => {
            let target = filterList.find(el => el.Code == item.Code);
            if (target && !(item.Value == target.Value)) {
              if (
                item.DataType == 'Timestamp' ||
                item.DataType == 'Date' ||
                item.DataType == 'DateTime'
              ) {
                if (target.Value) {
                  if (
                    target.Condition == 'between' &&
                    target.Value.push &&
                    target.Value.join('')
                  ) {
                    target.Value = target.Value.map(element => {
                      return new Date(
                        element.replace(/T/gi, ' ').replace(/\+08:00/gi, ' '),
                      ).format('yyyy/MM/dd hh:mm:ss');
                    });
                    target.ValueName = target.Value;
                  } else {
                    target.ValueName = target.Value = new Date(
                      target.Value.replace(/T/gi, ' ').replace(
                        /\+08:00/gi,
                        ' ',
                      ),
                    ).format('yyyy/MM/dd hh:mm:ss');
                  }
                }
              } else if (item.DataType == 'Boolean') {
                target.Value =
                  target.Value === null
                    ? ''
                    : target.Value == 'false' || target.Value == '0'
                      ? '0'
                      : '1';
              }
              item.Value = target.Value;
              item.ValueName = target.ValueName;
              item.Condition = target.Condition;
              hasChange = true;
            }
          });
          if (newFilter && newFilter.length) {
            hasChange = true;
            newFilter.forEach(item => {
              if (
                item.DataType == 'Timestamp' ||
                item.DataType == 'Date' ||
                item.DataType == 'DateTime'
              ) {
                if (item.Value) {
                  if (item.Condition == 'between' && item.Value.push) {
                    item.Value = item.Value.map(element => {
                      return new Date(
                        element.replace(/T/gi, ' ').replace(/\+08:00/gi, ' '),
                      ).format('yyyy/MM/dd hh:mm:ss');
                    });
                    item.ValueName = item.Value;
                  } else {
                    item.ValueName = item.Value = new Date(
                      target.Value.replace(/T/gi, ' ').replace(
                        /\+08:00/gi,
                        ' ',
                      ),
                    ).format('yyyy/MM/dd hh:mm:ss');
                  }
                }
              } else if (item.DataType == 'Boolean') {
                item.Value =
                  item.Value === null
                    ? ''
                    : item.Value == 'false' || item.Value == '0'
                      ? '0'
                      : '1';
              }

              filter.Filters.length &&
                filter.Filters.push({
                  ElementType: 'Relation',
                  Relation: 'and',
                });
              let target = filterServer.value.find(
                items => item.Code == `${items.tableAlias}.${items.fieldAlias}`,
              );
              if (target) {
                item.Name = target.fieldName;
                // item.DataType = target.DataType
              }
              filter.Filters.push(item);
            });
          }
        }

        if (hasChange) {
          modifyPlan.value.FilterContent = JSON.stringify(filter);
          notReload.value = false;
          nextTick(() => {
            notReload.value = true;
            isFilterContentChage.value = true;
          });
        }
      },
      isComplex: () => {
        return isComplex.value;
      },
      scrollToCurrenct,
      getAllFilters,
      initData,
      getFilterFields: () => {
        return _.cloneDeep(filterServer.value);
      },
      setValueByCode: (code, data) => {
        let FilterContent = JSON.parse(getAllFilters());
        FilterContent.Filters.forEach(element => {
          if (
            element.Code &&
            (element.Code.split('.').includes(code) || element.Code == code)
          ) {
            element.Value = data.Value;
            element.ValueName = data.Name;
          }
        });
        modifyPlan.value.FilterContent = JSON.stringify(FilterContent);
      },
    });
    expose(mappingExpose);
    const isOpen = ref(false);
    const onPlanChanged = async ql => {
      // isOpen.value = false;

      // isFirstLoad.value = true;
      ql = await GetQueryPlanV2(ql.ID);
      modifyPlan.value = Object.assign({}, ql);
      notReload.value = false;
      nextTick(() => {
        notReload.value = true;
      });
    };

    const computedStatic = computed(() => {
      let mappingData = [
        $q.lang.queryPlan.mobile.filterCondition,
        $q.lang.queryPlan.mobile.filterPlan,
        $q.lang.queryPlan.mobile.planManager,
      ];

      if (mappingProps.staticItems) {
        let res = mappingProps.staticItems
          .map((item, index) => {
            // return [{"label":"筛选条件","ID":"1","isEnable":true,"description":"在移动端方案高级筛选下显示条件管理tabs，支持提哦啊贱的修改与保存"},{"ID":"2","label":"筛选方案","isEnable":true,"description":"在移动端方案高级筛选下显示筛选方案tabs，支持方案的快速切换以及条件预览"},{"ID":"3","label":"方案管理","isEnable":true,"description":"在移动端方案高级筛选下显示方案管理tabs，支持方案的删除，编辑，置顶，订阅等操作"}];

            return {
              ...item,
              label: mappingData[index],
              code: item.ID,
            };
          })
          .filter(item => item.isEnable);
        if (!res.length) {
          res.push({
            label: '筛选条件',
            ID: '1',
            isEnable: true,
            description:
              '在移动端方案高级筛选下显示条件管理tabs，支持提哦啊贱的修改与保存',
          });
        }

        if (res.find(item => item.ID == 3)) {
          isShowPlanManger.value = true;
        } else {
          isShowPlanManger.value = false;
        }
        if (res.length == 1) {
          diff = 34 + 16 + 12;
          clientHeight = window.innerHeight + diff + 'px';
          document.documentElement.style.setProperty(
            '--t-client-height-p',
            clientHeight,
          );
        }
        return res;
      }
      return []
    });
    const computedTarget = computed(() => {
      return computedStatic.value[TabsRef.value?.currentTabIndex]?.ID;
    });
    const renderSelecterHelper = () => {
      return (
        <div
          style={`${mappingProps.visible === false ? 'display: none;' : 'display: flex;'}align-items: center;${props.exclusiveLine == '1' ? 'height:32px;line-height:32px;width:100%;padding:0 !important;' : ''}`}
        >
          {/* <tm-icon name='filter_alt' onClick={handleClick} /> */}

          <span
            ref={refQueryPlanM}
            style='position:relative;padding-right:0px;width:100% '
            onClick={() => {
              TabsRef.value && (TabsRef.value.currentTabIndex = 0);
            }}
          >
            {useGenerateIcon(
              props,
              queryPlanList,
              refTPopupProxy,
              modifyPlan,
              currectPlan,
              UpdateRepeatFilter,
              handleClick,
              emit,
              runingPlan,
              isFilterContentChage,
              GetQueryPlanV2,
              isFirstLoad,
              props.onlyShowIcon,
              $q,
              checkScrollbar,
            )}
          </span>

          {/* <i class={'fas dx-icon icon-t-filter'} onClick={handleClick}></i> */}
          <tm-dialog
            class='select_helper_popup_m'
            v-model:show={showRenameDialog.value}
            onHide={() => {
              showRenameDialog.value = false;
            }}
            onShow={() => {
              showRenameDialog.value = true;
            }}
            position='right'
            // 如果设置为false 组件限制无法全屏
            maximized={true}
          >
            <t-card
              style='width: 100vw;    background: #fff;'
              class='queryplanContent_m'
            >
              <header>
                <i
                  class={`${TComponents?.IconList?.common ?? 'fas dx-icon'} ${TComponents?.IconList?.arrowLeft ?? 'icon-t-arrow-left'}`}
                  onClick={() => {
                    showRenameDialog.value = false;
                  }}
                ></i>
                <span>{$q.lang.queryPlan.dialog.reName}</span>
                <span
                  class='submit'
                  onClick={async () => {
                    const e = {
                      plan: renameProxy.value,
                    };
                    const data = targetName.value;
                    if (data.length > 11) {
                      return Funcs.Notify(
                        $q.lang.selectHelper.warning,
                        $q.lang.queryPlan.dialog.planNameLengthCheck,
                        'warning',
                      );
                    }
                    if (e.plan.PlanRange == 2) {
                      if (queryPlanList.value.some(item => item.Name == data)) {
                        return Funcs.Notify(
                          $q.lang.selectHelper.warning,
                          $q.lang.queryPlan.dialog.planIsExist,
                          'warning',
                        );
                      }
                    } else {
                      if (
                        queryPlanList.value.some(
                          item =>
                            item.Name == data &&
                            (item.PlanRange == e.plan.PlanRange ||
                              item.PlanRange == 2 ||
                              item.PlanRange == 3),
                        )
                      ) {
                        return Funcs.Notify(
                          $q.lang.selectHelper.warning,
                          $q.lang.queryPlan.dialog.planIsExist,
                          'warning',
                        );
                      }
                    }

                    await UpdateQueryPlan(e.plan, {
                      PlanName: targetName.value,
                    });
                    queryPlanList.value.forEach(
                      item => item.ID == e.plan.ID && (item.Name = e.plan.Name),
                    );
                    if (modifyPlan.value.ID == e.plan.ID) {
                      modifyPlan.value.Name = targetName.value;
                    }
                    setTimeout(() => {
                      // planIsChange.value = _planIsChange;
                    }, 100);
                    showRenameDialog.value = false;
                  }}
                >
                  {' '}
                  {$q.lang.label.ok}
                </span>
              </header>

              <t-card-section class='tr-card-content'>
                <t-input
                  class='plan_rename_m'
                  borderType='borderless'
                  class={'tr-input-form'}
                  clearable
                  labelPosition='top'
                  v-model={targetName.value}
                  label={$q.lang.queryPlan.dialog.planName}
                />
              </t-card-section>
            </t-card>
          </tm-dialog>
          <tm-dialog
            v-model:show={showShareDetil.value}
            onHide={() => {
              showShareDetil.value = false;
            }}
            onShow={() => {
              showShareDetil.value = true;
            }}
            class='shareDteail'
            position='right'
            // 如果设置为false 组件限制无法全屏
            maximized={true}
          >
            <t-card
              style='width: 100vw;    background: #fff;'
              class='queryplanContent_m'
            >
              <header>
                <i
                  class={`${TComponents?.IconList?.common ?? 'fas dx-icon'} ${TComponents?.IconList?.arrowLeft ?? 'icon-t-arrow-left'}`}
                  onClick={() => {
                    showShareDetil.value = false;
                  }}
                ></i>
                <span>{$q.lang.queryPlan.dialog.shareDetile}</span>
              </header>
              {(() => {
                if (shareDetile.value.SharedBy) {
                  return (
                    <t-card-section class='tr-card-content'>
                      <t-chips
                        label={$q.lang.queryPlan.dialog.shareBy}
                        readonly={true}
                        labelPosition='top'
                        modelValue={(() => {
                          return [{ TagName: shareDetile.value.SharedBy }];
                        })()}
                      ></t-chips>
                    </t-card-section>
                  );
                }
              })()}
              {(() => {
                if (shareDetile.value.ShareUsers) {
                  return (
                    <t-card-section>
                      <t-chips
                        label={$q.lang.queryPlan.dialog.shareTo}
                        labelPosition='top'
                        readonly={true}
                        modelValue={(() => {
                          return shareDetile.value.ShareUsers.map(item => {
                            return { TagName: item.UserName || item.RealName };
                          });
                        })()}
                      ></t-chips>
                    </t-card-section>
                  );
                }
              })()}
            </t-card>
          </tm-dialog>
          <tm-dialog
            class='select_helper_popup_m'
            v-model:show={showDialog.value}
            onHide={() => {
              showDialog.value = false;
            }}
            onShow={() => {
              showDialog.value = true;
            }}
            position='right'
            // 如果设置为false 组件限制无法全屏
            maximized={true}
          >
            <t-card
              style='width: 100vw;    background: #fff;'
              class='queryplanContent_m'
            >
              <header>
                <i
                  class={`${TComponents?.IconList?.common ?? 'fas dx-icon'} ${TComponents?.IconList?.arrowLeft ?? 'icon-t-arrow-left'}`}
                  onClick={() => {
                    showDialog.value = false;
                  }}
                ></i>
                <span>{$q.lang.queryPlan.dialog.planSaveAs}</span>
                <span
                  class='submit'
                  onClick={async () => {
                    if (
                      queryPlanList.value.some(
                        item =>
                          item.Name == targetName.value &&
                          item.PlanRange == (isPublic.value ? '0' : '1'),
                      )
                    ) {
                      return Funcs.Notify(
                        $q.lang.selectHelper.warning,
                        $q.lang.queryPlan.dialog.planIsExist,
                        'warning',
                      );
                    }
                    const data = targetName.value;
                    if (data.length > 11) {
                      return Funcs.Notify(
                        $q.lang.selectHelper.warning,
                        $q.lang.queryPlan.dialog.planNameLengthCheck,
                        'warning',
                      );
                    }
                    const plan = Object.assign({}, saveAsPlan.value);

                    plan.Name = targetName.value;
                    plan.PlanRange = isPublic.value ? '0' : '1';
                    plan.isDefault = isDefault.value;

                    await CreateOrUpdateQueryPlan(true, plan); // Fix: Pass a third argument, such as null, to the CreateOrUpdateQueryPlan function.
                    queryPlanList.value = await getQueryPlanList();
                    modifyPlan.value = Object.assign({}, plan);
                    currectPlan.value = Object.assign({}, plan);

                    showDialog.value = false;
                  }}
                >
                  {' '}
                  {$q.lang.label.ok}
                </span>
              </header>
              <t-card-section>
                <t-input
                  class={'tr-input-form'}
                  class='plan_rename_m'
                  borderType='borderless'
                  clearable
                  labelPosition='top'
                  v-model={targetName.value}
                  label={$q.lang.queryPlan.dialog.planName}
                />
              </t-card-section>
              {(() => {
                if (
                  queryPlanList.value.every(
                    item => item.IsAuth || item.PlanRange == '3',
                  )
                ) {
                  return (
                    <t-card-section>
                      <t-select
                        style='width:100%'
                        borderless
                        class={'tr-select-enterform'}
                        label={$q.lang.queryPlan.dialog.planType}
                        labelPosition='top'
                        v-model={isPublic.value}
                        itemsDataSourceType='static'
                        staticItems={[
                          {
                            label: $q.lang.queryPlan.dialog.publicPlan,
                            value: true,
                          },
                          {
                            label: $q.lang.queryPlan.dialog.previtePlan,
                            value: false,
                          },
                        ]}
                      ></t-select>
                    </t-card-section>
                  );
                }
              })()}
              <t-card-section>
                <t-toggle
                  labelPosition='top'
                  style='opacity:100%'
                  label={$q.lang.queryPlan.dialog.defaultPlan}
                  labelPosition='left'
                  v-model={isDefault.value}
                ></t-toggle>
              </t-card-section>
            </t-card>
          </tm-dialog>
          {(() => {
            if (openSubWarning.value) {
              return (
                <subWarning
                  filterServer={filterServer.value}
                  dataQuery={dataQuery.value}
                  modifyPlan={subPlan.value}
                  v-model:showSubWarning={openSubWarning.value}
                  pageID={pageID.value}
                  pageCode={pageCode.value}
                  pageName={pageName.value}
                  onSubWarning={async e => {
                    if (e == 'cancel') {
                      delete subPlan.value.WarningID;
                      UpdateQueryPlan(subPlan.value, {
                        WarningID: '',
                      });
                      queryPlanList.value = await getQueryPlanList();
                      return;
                    }
                    if (e) {
                      //订阅只更新id 不更新其他
                      // CreateOrUpdateQueryPlan(false, currectPlan.value);
                      UpdateQueryPlan(subPlan.value, {
                        WarningID: e,
                      });
                      queryPlanList.value = await getQueryPlanList();
                    }
                  }}
                ></subWarning>
              );
            } else {
              return '';
            }
          })()}
          <tm-dialog
            class='select_helper_popup_m'
            position='right'
            // 如果设置为false 组件限制无法全屏
            maximized={true}
            v-model:show={showShare.value}
            onHide={() => {
              showShare.value = false;
            }}
            onShow={() => {
              showShare.value = true;
            }}
          >
            <t-card
              style='width: 100vw;    background: #fff;'
              class='queryplanContent_m'
            >
              <header>
                <i
                  class={`${TComponents?.IconList?.common ?? 'fas dx-icon'} ${TComponents?.IconList?.arrowLeft ?? 'icon-t-arrow-left'}`}
                  onClick={() => {
                    showShare.value = false;
                  }}
                ></i>
                <span>{$q.lang.queryPlan.dialog.share}</span>
                <span
                  class='submit'
                  onClick={() => {
                    shareToOther(sharePlan.value.ShareUsers, sharePlan.value);
                  }}
                >
                  {' '}
                  {$q.lang.label.ok}
                </span>
              </header>

              <t-card-section>
                <t-input
                  class={'tr-input-form'}
                  borderType='borderless'
                  labelPosition='top'
                  v-model={sharePlan.value.Name}
                  readonly
                  label={$q.lang.queryPlan.dialog.planName}
                />
                <tm-select-helper
                  class={'tr-input-form'}
                  borderType='borderless'
                  labelPosition='top'
                  style='margin-top:20px'
                  openType='right'
                  label={$q.lang.queryPlan.dialog.choiseShare}
                  placeholder={$q.lang.queryPlan.dialog.choiseShare}
                  columns={[
                    {
                      isShow: true,
                      ID: 'RealName',
                      dataField: 'RealName',
                      caption: $q.lang.queryPlan.dialog.userName,
                    },
                    {
                      ID: 'DepartmentName',
                      dataField: 'DepartmentName',
                      caption: $q.lang.queryPlan.dialog.department,
                    },
                  ]}
                  pagination={true}
                  multiple={true}
                  labelField='RealName'
                  valueField='UserID'
                  historyEnable={true}
                  historySaveCount='5'
                  iconEnable={true}
                  iconFiled='Avatar'
                  // v-model:value={JSON.parse(
                  //     JSON.stringify(sharePlan.value),
                  //   ).ShareUsers}
                  value={(() => {
                    let shareUsers = JSON.parse(
                      JSON.stringify(sharePlan.value),
                    ).ShareUsers;
                    shareUsers
                      ? (shareUsers = shareUsers.map(item => {
                          return {
                            RealName: item.UserName || item.RealName,
                            UserID: item.UserID,
                          };
                        }))
                      : [];
                    return shareUsers;
                  })()}
                  search={async (pageIndex, val, Filter) => {
                    let rows = [];
                    let total;
                    if (window.TFF) {
                      const data = await TFF.common.ajax.getDataAsync({
                        url: `${TFF.common.ajax.getServiceUrl(
                          'SYS_CommonHelper_GetUserList',
                        )}`,
                        type: 'post',
                        data: {
                          filter: JSON.stringify({
                            FieldName: 'RealName',
                            FieldValue: Filter,
                            FilterKey: {
                              Data_FunctionID:
                                'DF686BBF-2387-4259-886B-249022156A8A',
                              Enabled: 1,
                              FilterByPeakOrgID:
                                'fb247fb4-13d1-4c1b-acf8-27278b9bd0b1',
                              NoDataAuth: 'true',
                            },
                            page: pageIndex,
                            rows: val ? val : 10,
                          }),
                        },
                      });
                      rows = data.rows;
                      total = data.total;
                    }
                    return {
                      List: rows,
                      Count: total,
                    };
                  }}
                  onConfirm={row => {
                    if (
                      row.some(item => Session && item.UserID == Session.UserId)
                    ) {
                      Funcs.Notify(
                        $q.lang.selectHelper.warning,
                        $q.lang.queryPlan.dialog.shareWarning,
                        'warning',
                      );
                      row = row.filter(item => item.UserID != Session.UserId);
                      sharePlan.value.ShareUsers = row;
                    } else {
                      sharePlan.value.ShareUsers = row;
                    }
                  }}
                  ref={selectHelper}
                ></tm-select-helper>
              </t-card-section>
            </t-card>
          </tm-dialog>
          {/* top:${topSize.value} */}
          <tm-dialog
            ref={refTPopupProxy}
            class='select_helper_popup select_helper_popup_m queryplanmanage'
            position='bottom'
            style={
              isOpacity.value
                ? `opacity:1; background: rgba(0, 0, 0, .32);`
                : 'opacity:0; background: rgba(0, 0, 0, .32);'
            }
            v-model:show={showPopup.value}
            // 如果设置为false 组件限制无法全屏
            maximized={true}
            onShow={() => {}}
            onHide={() => {}}
          >
            {(() => {
              if (showPopup.value) {
                return (
                  <div
                    class='queryplanContent_m'
                    style='width:100vw;    background: #F4F4F5 !important;    border-radius: 8px;'
                  >
                    {/* display:none */}
                    <header
                      style={
                        'margin-bottom: 1px;height:56px;    transform: translate(0px, 0px);margin-bottom:0'
                      }
                    >
                      {/* <i
                        class={`${TComponents?.IconList?.common??'fas dx-icon'} ${TComponents?.IconList?.arrowLeft??'icon-t-arrow-left'}`}
                        onClick={closePopup}
                        style={"top:22px"}
                      ></i> */}
                      <span style={'line-height:22px;margin:16px 0'}>
                        {$q.lang.queryPlan.mobile.advanceFilter}
                      </span>
                      <i
                        style={
                          '    top: 20px;    margin-left: calc(100vw - 32px);'
                        }
                        class={'fas dx-icon icon-t-delete-01'}
                        onClick={e => {
                          if (editPlan.value) {
                            modifyPlan.value = editPlan.value;
                            editPlan.value = null;
                          }
                          showPopup.value = false;
                          e.stopPropagation();
                          e.preventDefault();
                          return false;
                        }}
                      ></i>
                    </header>
                    {(() => {
                      if (computedStatic.value.length != 1) {
                        return (
                          <tm-tabs
                            ref={TabsRef}
                            v-model:modelValue={active.value}
                            inline-label
                            mobile-arrows
                            className='querypaln_fun_tabs'
                            staticItems={computedStatic}
                          ></tm-tabs>
                        );
                      }
                    })()}

                    {(() => {
                      if (computedTarget.value == 2) {
                        let Template = [];

                        Template.push(
                          <div
                            style={
                              ' background:#fff;    height: calc(var(--t-client-height-p) - var(--queryplan-dialog-top) + 4px - 48px - 60px); display: flex;flex-direction: column;'
                            }
                          >
                            <p
                              style={`width:100%;padding:0;margin:0;border-top:1px solid #DFE0E2;margin:${mappingProps.staticItems.filter(item => item.isEnable).length <= 1 ? '0 0 12px 0' : '12px 0'}`}
                            ></p>
                            <div
                              style={
                                '    flex: 0 auto;overflow-y: auto;padding:0 16px'
                              }
                            >
                              <p
                                style={`    display: flex;justify-content: space-between;`}
                              >
                                {$q.lang.queryPlan.title.queryPlan}
                                {(() => {
                                  if (showExpand.value) {
                                    return (
                                      <span
                                        onClick={() => {
                                          isOpen.value = !isOpen.value;
                                        }}
                                        style='padding-left: 8px;font-size:12px;color:#0000008f'
                                      >
                                        {isOpen.value
                                          ? $q.lang.queryPlan.title.collapse
                                          : $q.lang.queryPlan.title.expand}
                                        {(() => {
                                          if (!isOpen.value) {
                                            return (
                                              <tm-icon
                                                style='font-size:12px'
                                                name='expand_more'
                                              />
                                            );
                                          }
                                          return (
                                            <tm-icon
                                              style='font-size:12px'
                                              name='expand_less'
                                            />
                                          );
                                        })()}
                                      </span>
                                    );
                                  }
                                })()}
                              </p>
                              {(() => {
                                if (true) {
                                  return (
                                    <>
                                      <div
                                        style={`display: flex;justify-content: start;align-items: center; gap: 12px 12px;flex-wrap:wrap;margin-top:12px;${!isOpen.value ? 'max-height:88px;' : 'min-height: 60px;'} overflow: hidden;`}
                                      >
                                        {(() => {
                                          let Template = [];
                                          queryPlanList.value.forEach(ql => {
                                            if (modifyPlan.value.ID == ql.ID) {
                                              setTimeout(() => {
                                                if (
                                                  document.querySelector(
                                                    `.id_${ql.ID.replace(/-/gi, '')}`,
                                                  )
                                                ) {
                                                  document.querySelector(
                                                    `.id_${ql.ID.replace(/-/gi, '')}`,
                                                  ).parentNode.scrollTop =
                                                    -document.querySelector(
                                                      `.id_${ql.ID.replace(/-/gi, '')}`,
                                                    ).parentNode.offsetTop +
                                                    document.querySelector(
                                                      `.id_${ql.ID.replace(/-/gi, '')}`,
                                                    ).offsetTop -
                                                    40;
                                                  if (
                                                    document.querySelector(
                                                      `.id_${ql.ID.replace(/-/gi, '')}`,
                                                    ).parentNode.offsetHeight >
                                                    72
                                                  ) {
                                                    showExpand.value = true;
                                                  } else {
                                                    showExpand.value = false;
                                                  }
                                                }
                                              }, 200);
                                            }
                                            Template.push(
                                              <span
                                                class={
                                                  'id_' +
                                                  ql.ID.replace(/-/gi, '')
                                                }
                                                style={`color:rgba(0,0,0,0.8);position: relative; overflow: hidden;border-radius:2px;font-size:12px;padding: 4px 8px;display: flex;align-items: center;flex: none;color:rgba(0,0,0,.8);${modifyPlan.value.ID == ql.ID ? 'color:var(--t-color);background:var(--t-color-background)' : 'background:#F4F4F5'}`}
                                                onClick={async () => {
                                                  isOpen.value = false;
                                                  // if (
                                                  //   runingPlan.value.ID == ql.ID
                                                  // ) {
                                                  //   return;
                                                  // }
                                                  isFirstLoad.value = true;
                                                  ql = await GetQueryPlanV2(
                                                    ql.ID,
                                                  );

                                                  modifyPlan.value =
                                                    Object.assign({}, ql);
                                                  notReload.value = false;
                                                  nextTick(() => {
                                                    notReload.value = true;
                                                    setTimeout(() => {
                                                      document.querySelector(
                                                        `.id_${ql.ID.replace(/-/gi, '')}`,
                                                      ).parentNode.scrollTop =
                                                        -document.querySelector(
                                                          `.id_${ql.ID.replace(/-/gi, '')}`,
                                                        ).parentNode.offsetTop +
                                                        document.querySelector(
                                                          `.id_${ql.ID.replace(/-/gi, '')}`,
                                                        ).offsetTop -
                                                        40;
                                                    }, 200);
                                                  });
                                                }}
                                              >
                                                {ql.Name}
                                                {(() => {
                                                  if (
                                                    runingPlan.value.ID == ql.ID
                                                  ) {
                                                    return (
                                                      <svg
                                                        style={
                                                          '    position: absolute; height: 10px;right: 0px;bottom: 0;color:var(--t-color)'
                                                        }
                                                        fill='currentColor'
                                                        class='web-Icon_primary'
                                                        data-name='图层 1'
                                                        xmlns='http://www.w3.org/2000/svg'
                                                        viewBox='0 0 14 14'
                                                      >
                                                        <path d='M0,14H13.57a.4.4,0,0,0,.4-.4L14,0ZM13,8.37,9.21,12.14a.47.47,0,0,1-.66,0L6.33,10a.48.48,0,0,1,0-.67.46.46,0,0,1,.67,0l1.88,1.88,3.44-3.43a.47.47,0,0,1,.53,0A.48.48,0,0,1,13,8.37Z'></path>
                                                      </svg>
                                                    );
                                                  }
                                                })()}
                                              </span>,
                                            );
                                          });
                                          return Template;
                                        })()}
                                      </div>
                                    </>
                                  );
                                }
                              })()}
                              <p style={'margin-top:12px'}>
                                {$q.lang.queryPlan.title.queryCondition}
                              </p>
                              {(() => {
                                if (!isComplex.value) {
                                  if (
                                    !FilterGroups.value.filter(item => {
                                      if (
                                        Array.isArray(item.Value) ||
                                        Array.isArray(item.ValueName)
                                      ) {
                                        if (Array.isArray(item.Value)) {
                                        } else if (
                                          Array.isArray(item.ValueName)
                                        ) {
                                        }
                                        return (
                                          (item.Value?.join &&
                                            item.Value?.join('').length) ||
                                          (item.ValueName?.join &&
                                            item.ValueName?.join('').length)
                                        );
                                      } else if (item.Value || item.ValueName) {
                                        return true;
                                      } else if (
                                        item.Condition == 'isnotblank' ||
                                        item.Condition == 'isblank'
                                      ) {
                                        return true;
                                      }
                                      return false;
                                    }).length
                                  ) {
                                    return (
                                      <div
                                        style={
                                          'min-height:220px;    display: flex;justify-content: center;flex-wrap: wrap;    min-height: 220px;align-items: center;'
                                        }
                                      >
                                        <NoDataImage style='width:120px;margin:0 auto'></NoDataImage>
                                        <p
                                          style={
                                            'color:rgba(0,0,0,.56);width:100%;text-align:center;font-size:12px;    height: calc(220px - 150px);'
                                          }
                                        >
                                          暂无条件
                                        </p>
                                      </div>
                                    );
                                  }
                                  return (
                                    <div
                                      class='FilterContent'
                                      style={`flex: none;overflow-x: hidden;`}
                                    >
                                      {(() => {
                                        if (notReload.value) {
                                          return (
                                            <filter-preview
                                              isHideBorder={true}
                                              isReadOnly={true}
                                              v-model:filter={_filter.value}
                                              v-model:filterGroups={
                                                FilterGroups.value
                                              }
                                              filterServer={filterServer.value}
                                              onOpenChange={() => {
                                                openChnage.value =
                                                  !openChnage.value;
                                              }}
                                            ></filter-preview>
                                          );
                                        }
                                      })()}
                                    </div>
                                  );
                                } else {
                                  return (
                                    <div
                                      class='FilterContent'
                                      style={`
                                  flex: none;

                                  overflow-x: hidden;`}
                                    >
                                      <div
                                        class={'filterContent'}
                                        style={
                                          'padding:0 !important;overflow:hidden'
                                        }
                                      >
                                        <span class='tr-filter'>
                                          {generateComContains(
                                            FilterGroups.value,
                                          )}
                                        </span>
                                      </div>
                                    </div>
                                  );
                                }
                              })()}
                            </div>

                            <p
                              style={`display: flex;gap: 8px;position: relative;flex: 1;align-items: end;padding:12px 16px;`}
                            >
                              {/* <tm-button
                                  class='submit'
                                  onClick={() => {
                                    refTPopupProxy.value?.hide();
                                  }}
                                  type='primary'
                                  style='border:1px solid #DCDCDC;color: rgba(0, 0, 0, var(--t-color-opacity,0.9));height:32px'
                                  size='normal'
                                  style='width:50%;height:40px'
                                >
                                  {$q.lang.label.cancel}
                                </tm-button> */}
                              <tm-button
                                class='submit'
                                color='primary'
                                onClick={() => {
                                  checkPlan(true);
                                }}
                                type='primary'
                                size='normal'
                                style='width:100%;height:40px'
                              >
                                {$q.lang.queryPlan.mobile.run}
                              </tm-button>
                            </p>
                          </div>,
                        );
                        return Template;
                      }
                    })()}
                    {/* // 需要接受变更，不能直接隐藏 */}
                    {(() => {
                      if (false) {
                        return (
                          <div
                            class='currentpaln'
                            style={
                              TabsRef.value?.currentTabIndex == 0
                                ? ''
                                : 'height:0;overflow:hidden;padding:0'
                            }
                          >
                            <span class='title'>
                              {$q.lang.queryPlan.mobile.currentPlan}
                            </span>

                            <span
                              class='planName'
                              style='position:relative;padding-right:10px'
                              onClick={() => {
                                TabsRef.value &&
                                  (TabsRef.value.currentTabIndex = 2);
                              }}
                            >
                              {modifyPlan.value ? modifyPlan.value.Name : ''}
                              {(() => {
                                //测试
                                if (isFilterContentChage.value) {
                                  return (
                                    <tm-badge
                                      transparent={true}
                                      color='red'
                                      floating
                                      rounded
                                      isDot={true}
                                    ></tm-badge>
                                  );
                                }
                              })()}
                            </span>
                          </div>
                        );
                      }
                    })()}

                    <div class='planManager'>
                      <p
                        style={`width:100%;padding:0;margin:0;border-top:1px solid #DFE0E2;margin:${mappingProps.staticItems.filter(item => item.isEnable).length <= 1 ? '0 0 12px 0' : '12px 0'}`}
                      ></p>
                      <div
                        type='fasr-tabs-div'
                        class={'filterManger'}
                        index={1}
                        onClick={e => {
                          e.stopPropagation();
                          e.preventDefault();
                          return false;
                        }}
                      >
                        <div
                          style={
                            computedTarget.value == 1
                              ? ''
                              : 'height:0;overflow:hidden'
                          }
                        >
                          {(() => {
                            if (!isComplex.value) {
                              return (
                                <div class='FilterContent'>
                                  {/* <filter-preview
                                    operateMoreByButton={operateMoreByButton}
                                    filter={_filter.value}
                                    filterGroups={FilterGroups.value}
                                    onOpenChange={() => {
                                      openChnage.value = !openChnage.value;
                                    }}
                                  ></filter-preview> */}
                                  {(() => {
                                    if (notReload.value) {
                                      return (
                                        <filter-content
                                          initedData={initedData}
                                          filterServer={filterServer.value}
                                          v-model:filter={_filter.value}
                                          v-model:filterGroups={
                                            FilterGroups.value
                                          }
                                          onUpdate:filterGroups={(
                                            e,
                                            target,
                                          ) => {
                                            let index =
                                              FilterGroups.value.findIndex(
                                                item =>
                                                  item.Code == target.Code,
                                              );

                                            if (index != -1) {
                                              FilterGroups.value[index] =
                                                target;
                                            } else {
                                              FilterGroups.value.push(
                                                _.cloneDeep(target),
                                              );
                                            }
                                            // FilterGroups.value =
                                            //   FilterGroups.value.map(item => {
                                            //     if (item.Code == target.Code) {
                                            //       let temp = target.ValueName
                                            //       targtet.Value = target.ValueName
                                            //       target.ValueName=temp
                                            //       item = target;
                                            //     }
                                            //     return item;
                                            //   });

                                            // modifyPlan.value.FilterShow = JSON.stringify({
                                            //   FilterModel:"Classic",
                                            //   FilterGroups:FilterGroups.value
                                            // })
                                          }}
                                          openChange={openChnage.value}
                                          pageID={pageID.value}
                                          currectPlan={modifyPlan.value}
                                        ></filter-content>
                                      );
                                    }
                                  })()}
                                </div>
                              );
                            } else {
                              return (
                                <div class='FilterContent'>
                                  <p
                                    style={`
                                          width: calc(100vw - 32px);
                                        height: 32px;
                                        color: rgba(0, 0, 0, 0.56);
                                        font-size: 12px;
                                        margin: 0px 16px 16px 16px;
                                        align-items: center;
                                        background:  rgba(54, 86, 255, 0.05);
                                        display: flex
                                    ;
                                        text-indent: 12px;
                                      `}
                                  >
                                    {
                                      $q.lang.queryPlan.mobile
                                        .complexPlaceholder
                                    }
                                  </p>
                                  <div
                                    class={'filterContent'}
                                    style={
                                      'padding:0px 12px !important;padding-top:0px !important;'
                                    }
                                  >
                                    <span class='tr-filter'>
                                      {generateComContains(FilterGroups.value)}
                                    </span>
                                  </div>
                                </div>
                              );
                            }
                          })()}

                          <div class='bottom' style={'position: relative;'}>
                            {(() => {
                              if (isShowPlanManger.value) {
                                return (
                                  <tm-popover
                                    v-model:show={showOperateMore.value}
                                    actions={operateMore.value}
                                    onSelect={operateMoreByButton}
                                    className='defaultPlanPopover'
                                    style='border:1px solid #DCDCDC;color: rgba(0, 0, 0, var(--t-color-opacity,0.9));height:40px;width:50%;min-width:40px !important;background:#fff'
                                  >
                                    {{
                                      reference: () => {
                                        return (
                                          <p
                                            class='cancel'
                                            style='word-break: keep-all;width:100vw;margin:0;color: rgba(0, 0, 0, var(--t-color-opacity,0.9))!important;'
                                          >
                                            更多
                                            <i
                                              style={'margin-left:8px'}
                                              class={`${TComponents?.IconList?.common ?? 'fas dx-icon'} ${TComponents?.IconList?.arrowUp ?? 'icon-t-arrow-up'}`}
                                            ></i>
                                            {/* {$q.lang.queryPlan.mobile.more} */}
                                          </p>
                                        );
                                      },
                                    }}
                                  </tm-popover>
                                );
                              }
                            })()}

                            <tm-button
                              style='height:40px;border:1px solid #DCDCDC;color: rgba(0, 0, 0, var(--t-color-opacity,0.9));width:50%'
                              onClick={async () => {
                                operateMoreByButton({ value: 'reset' });
                                // let id = modifyPlan.value.ID;
                                // let plan = await GetQueryPlanV2(id)
                                // _filter.value = JSON.parse(plan.FilterContent)
                                // await nextTick()
                                // notReload.value = true;
                                // isFilterContentChage.value = false;
                              }}
                            >
                              {$q.lang.queryPlan.mobile.reset}
                            </tm-button>
                            {(() => {
                              if (
                                modifyPlan.value &&
                                modifyPlan.value.IsAuth &&
                                modifyPlan.value.PlanRange != 3 &&
                                isShowPlanManger.value
                              ) {
                                return (
                                  <tm-button
                                    class='submit'
                                    color='primary'
                                    onClick={submitData}
                                    type='primary'
                                    size='normal'
                                    style='width:50%;height:40px'
                                  >
                                    {$q.lang.queryPlan.mobile.saveAndRun}
                                  </tm-button>
                                );
                              } else {
                                return (
                                  <tm-button
                                    class='submit'
                                    color='primary'
                                    onClick={() => {
                                      checkPlan(true);
                                    }}
                                    type='primary'
                                    size='normal'
                                    style='width:50%;height:40px'
                                  >
                                    {$q.lang.queryPlan.mobile.run}
                                  </tm-button>
                                );
                              }
                            })()}
                          </div>
                        </div>
                      </div>
                      {/* </q-tab-panel>
                    <q-tab-panel name='1'> */}
                      <div
                        type='fasr-tabs-div'
                        class={'planListManger'}
                        index={2}
                      >
                        {(() => {
                          if (computedTarget.value == 3) {
                            return (
                              <div
                                title={$q.lang.queryPlan.mobile.planManager}
                                style={'padding:0 16px'}
                                onClick={e => {
                                  e.stopPropagation();
                                  e.preventDefault();
                                  return false;
                                }}
                              >
                                <div class='search'>
                                  <tm-search
                                    class='tr-input-search queryplan_search'
                                    borderless
                                    outlined={false}
                                    style='width:100%;'
                                    placeholder={'输入关键字进行搜索'}
                                    v-model={searchFilter.value}
                                    dense='dense'
                                    clearable
                                    labelPosition='left'
                                  >
                                    {{
                                      prepend: () => {
                                        return (
                                          <t-icon
                                            name='search'
                                            class='cursor-pointer'
                                            style='font-size:14px;margin-left:6px'
                                          />
                                        );
                                      },
                                    }}
                                  </tm-search>
                                  <tm-popover
                                    ref={sortRef}
                                    v-model:show={showPopover.value}
                                    style='z-index:1000000;min-width:0'
                                    teleport={(() => {
                                      return document.body;
                                    })()}
                                  >
                                    {{
                                      default: () => {
                                        let TM = [];
                                        for (
                                          let i = 0;
                                          i < actions.length;
                                          i++
                                        ) {
                                          TM.push(
                                            <p
                                              key={i}
                                              onClick={() => {
                                                onSelect(actions[i]);
                                                showPopover.value = false;
                                                sortRef.value.hide();
                                              }}
                                              style='width:90px;padding:8px 10px;margin:0'
                                            >
                                              <span
                                                style={
                                                  sortCode.value ==
                                                  actions[i].value
                                                    ? 'color:#1A8CEA'
                                                    : ''
                                                }
                                              >
                                                {actions[i].text}
                                              </span>
                                            </p>,
                                          );
                                        }
                                        return TM;
                                      },
                                      reference: () => {
                                        return (
                                          <i
                                            style={'font-size:16px'}
                                            class={
                                              'fas dx-icon icon-t-sort-ascending'
                                            }
                                          ></i>
                                        );
                                      },
                                    }}
                                  </tm-popover>
                                </div>
                                <div
                                  class='planList'
                                  style={
                                    'height:calc(var(--t-client-height-p) - var(--queryplan-dialog-top) + 4px - 50px - 32px - 80px - 75px)'
                                  }
                                >
                                  <tm-list>
                                    <draggable
                                      style='display: flex;flex-direction: column;'
                                      modelValue={(searchFilter.value
                                        ? queryPlanByFilter.value
                                        : queryPlanList.value
                                      ).filter(
                                        item =>
                                          item.TopTime != '0001-01-01 00:00:00',
                                      )}
                                      group='top'
                                      item-key='id'
                                      onStart={() => {}}
                                    >
                                      {{
                                        item({ element, i }) {
                                          return (
                                            <div
                                              onPointerdown={e => {
                                                e.stopPropagation();
                                                return false;
                                              }}
                                              onTouchstart={e => {
                                                e.stopPropagation();
                                                return false;
                                              }}
                                              onTouchmove={e => {
                                                e.stopPropagation();
                                                return false;
                                              }}
                                              style={`
                                                display: flex;
                                                align-items: center;
                                                justify-content: start;
                                                margin-bottom:12px;
                                                `}
                                            >
                                              {/* <tm-icon
                                                name='toc'
                                                style={'color:rgba(0,0,0,0.32)'}
                                              /> */}
                                              <svg
                                                width='14'
                                                height='17'
                                                viewBox='0 0 14 17'
                                                fill='none'
                                                xmlns='http://www.w3.org/2000/svg'
                                              >
                                                <rect
                                                  width='14'
                                                  height='15.5939'
                                                  transform='translate(0 0.703125)'
                                                  fill='white'
                                                  fill-opacity='0.01'
                                                />
                                                <path
                                                  fill-rule='evenodd'
                                                  clip-rule='evenodd'
                                                  d='M3 12.6983C3 13.3608 3.48215 13.8978 4.07692 13.8978C4.67169 13.8978 5.15384 13.3608 5.15384 12.6983C5.15384 12.0358 4.67169 11.4988 4.07692 11.4988C3.48215 11.4988 3 12.0358 3 12.6983ZM3 8.49994C3 9.16242 3.48215 9.69946 4.07692 9.69946C4.67169 9.69946 5.15384 9.16242 5.15384 8.49994C5.15384 7.83746 4.67169 7.30042 4.07692 7.30042C3.48215 7.30042 3 7.83746 3 8.49994ZM3 4.30157C3 4.96405 3.48215 5.5011 4.07692 5.5011C4.67169 5.5011 5.15384 4.96405 5.15384 4.30157C5.15384 3.6391 4.67169 3.10205 4.07692 3.10205C3.48215 3.10205 3 3.6391 3 4.30157ZM7.84616 12.6983C7.84616 13.3608 8.32831 13.8978 8.92308 13.8978C9.51785 13.8978 10 13.3608 10 12.6983C10 12.0358 9.51785 11.4988 8.92308 11.4988C8.32831 11.4988 7.84616 12.0358 7.84616 12.6983ZM7.84616 8.49994C7.84616 9.16242 8.32831 9.69946 8.92308 9.69946C9.51785 9.69946 10 9.16242 10 8.49994C10 7.83746 9.51785 7.30042 8.92308 7.30042C8.32831 7.30042 7.84616 7.83746 7.84616 8.49994ZM7.84616 4.30157C7.84616 4.96405 8.32831 5.5011 8.92308 5.5011C9.51785 5.5011 10 4.96405 10 4.30157C10 3.6391 9.51785 3.10205 8.92308 3.10205C8.32831 3.10205 7.84616 3.6391 7.84616 4.30157Z'
                                                  fill={'rgba(0,0,0,0.32)'}
                                                />
                                              </svg>

                                              <queryPlanComponent
                                                planSort={sortCode.value}
                                                planList={queryPlanList.value}
                                                showSubWarning={
                                                  mappingProps.showSubWarning
                                                }
                                                pageID={pageID.value}
                                                onOperate={planOperate}
                                                plan={element}
                                                v-model:modifyPlan={
                                                  modifyPlan.value
                                                }
                                                onPlanChange={async plan => {
                                                  onPlanChanged(plan);
                                                  // plan = await GetQueryPlanV2(plan.ID)
                                                  // modifyPlan.value =
                                                  //   Object.assign({}, plan);
                                                  // currectPlan.value =
                                                  //   Object.assign({}, plan);
                                                  // notReload.value = false;
                                                  // nextTick(() => {
                                                  //   notReload.value = true;
                                                  // });
                                                }}
                                              ></queryPlanComponent>
                                            </div>
                                          );
                                        },
                                      }}
                                    </draggable>
                                    <draggable
                                      style='display: flex;flex-direction: column;'
                                      modelValue={(searchFilter.value
                                        ? queryPlanByFilter.value
                                        : queryPlanList.value
                                      ).filter(
                                        item =>
                                          item.TopTime ==
                                            '0001-01-01 00:00:00' &&
                                          item.PlanRange == 0,
                                      )}
                                      onUpdate:modelValue={e => {
                                        updateQueryPlanList('public', e);
                                      }}
                                      group='public'
                                      item-key='id'
                                      onStart={() => {}}
                                    >
                                      {{
                                        item({ element, i }) {
                                          return (
                                            <div
                                              style={`
                                                display: flex;
                                                align-items: center;
                                                justify-content: start;margin-bottom:12px;
                                                `}
                                              onPointerdown={e => {
                                                if (
                                                  !(
                                                    searchFilter.value ||
                                                    sortCode.value !=
                                                      'PlanOrder'
                                                  )
                                                )
                                                  return;
                                                e.stopPropagation();
                                                return false;
                                              }}
                                              onTouchstart={e => {
                                                if (
                                                  !(
                                                    searchFilter.value ||
                                                    sortCode.value !=
                                                      'PlanOrder'
                                                  )
                                                )
                                                  return;
                                                e.stopPropagation();
                                                return false;
                                              }}
                                            >
                                              {/* <tm-icon
                                                name='toc'
                                                style={
                                                  searchFilter.value ||
                                                  sortCode.value != 'PlanOrder'
                                                    ? 'rgba(0,0,0,0.32)'
                                                    : 'rgba(0,0,0,0.8)'
                                                }
                                              /> */}
                                              <svg
                                                width='14'
                                                height='17'
                                                viewBox='0 0 14 17'
                                                fill='none'
                                                xmlns='http://www.w3.org/2000/svg'
                                              >
                                                <rect
                                                  width='14'
                                                  height='15.5939'
                                                  transform='translate(0 0.703125)'
                                                  fill='white'
                                                  fill-opacity='0.01'
                                                />
                                                <path
                                                  fill-rule='evenodd'
                                                  clip-rule='evenodd'
                                                  d='M3 12.6983C3 13.3608 3.48215 13.8978 4.07692 13.8978C4.67169 13.8978 5.15384 13.3608 5.15384 12.6983C5.15384 12.0358 4.67169 11.4988 4.07692 11.4988C3.48215 11.4988 3 12.0358 3 12.6983ZM3 8.49994C3 9.16242 3.48215 9.69946 4.07692 9.69946C4.67169 9.69946 5.15384 9.16242 5.15384 8.49994C5.15384 7.83746 4.67169 7.30042 4.07692 7.30042C3.48215 7.30042 3 7.83746 3 8.49994ZM3 4.30157C3 4.96405 3.48215 5.5011 4.07692 5.5011C4.67169 5.5011 5.15384 4.96405 5.15384 4.30157C5.15384 3.6391 4.67169 3.10205 4.07692 3.10205C3.48215 3.10205 3 3.6391 3 4.30157ZM7.84616 12.6983C7.84616 13.3608 8.32831 13.8978 8.92308 13.8978C9.51785 13.8978 10 13.3608 10 12.6983C10 12.0358 9.51785 11.4988 8.92308 11.4988C8.32831 11.4988 7.84616 12.0358 7.84616 12.6983ZM7.84616 8.49994C7.84616 9.16242 8.32831 9.69946 8.92308 9.69946C9.51785 9.69946 10 9.16242 10 8.49994C10 7.83746 9.51785 7.30042 8.92308 7.30042C8.32831 7.30042 7.84616 7.83746 7.84616 8.49994ZM7.84616 4.30157C7.84616 4.96405 8.32831 5.5011 8.92308 5.5011C9.51785 5.5011 10 4.96405 10 4.30157C10 3.6391 9.51785 3.10205 8.92308 3.10205C8.32831 3.10205 7.84616 3.6391 7.84616 4.30157Z'
                                                  fill={
                                                    searchFilter.value ||
                                                    sortCode.value !=
                                                      'PlanOrder'
                                                      ? 'rgba(0,0,0,0.32)'
                                                      : 'rgba(0,0,0,0.8)'
                                                  }
                                                />
                                              </svg>
                                              <queryPlanComponent
                                                planSort={sortCode.value}
                                                planList={queryPlanList.value}
                                                showSubWarning={
                                                  mappingProps.showSubWarning
                                                }
                                                pageID={pageID.value}
                                                onOperate={planOperate}
                                                plan={element}
                                                v-model:modifyPlan={
                                                  modifyPlan.value
                                                }
                                                onPlanChange={async plan => {
                                                  onPlanChanged(plan);
                                                  // plan = await GetQueryPlanV2(plan.ID)
                                                  // modifyPlan.value =
                                                  //   Object.assign({}, plan);
                                                  // currectPlan.value =
                                                  //   Object.assign({}, plan);
                                                }}
                                              ></queryPlanComponent>
                                            </div>
                                          );
                                        },
                                      }}
                                    </draggable>
                                    <draggable
                                      style='display: flex;flex-direction: column;'
                                      modelValue={(searchFilter.value
                                        ? queryPlanByFilter.value
                                        : queryPlanList.value
                                      ).filter(
                                        item =>
                                          item.TopTime ==
                                            '0001-01-01 00:00:00' &&
                                          item.PlanRange != 0,
                                      )}
                                      group='prevte'
                                      item-key='id'
                                      onStart={() => {}}
                                      onUpdate:modelValue={e => {
                                        updateQueryPlanList('previte', e);
                                      }}
                                    >
                                      {{
                                        item({ element, i }) {
                                          return (
                                            <div
                                              style={`
                                                display: flex;
                                                align-items: center;
                                                justify-content: start;margin-bottom:12px;
                                                `}
                                              onPointerdown={e => {
                                                if (
                                                  !(
                                                    searchFilter.value ||
                                                    sortCode.value !=
                                                      'PlanOrder'
                                                  )
                                                )
                                                  return;
                                                e.stopPropagation();
                                                return false;
                                              }}
                                              onTouchstart={e => {
                                                if (
                                                  !(
                                                    searchFilter.value ||
                                                    sortCode.value !=
                                                      'PlanOrder'
                                                  )
                                                )
                                                  return;
                                                e.stopPropagation();
                                                return false;
                                              }}
                                            >
                                              {/* <tm-icon
                                                name='toc'
                                                style={
                                                  searchFilter.value ||
                                                  sortCode.value != 'PlanOrder'
                                                    ? 'rgba(0,0,0,0.32)'
                                                    : 'rgba(0,0,0,0.8)'
                                                }
                                              /> */}
                                              <svg
                                                width='14'
                                                height='17'
                                                viewBox='0 0 14 17'
                                                fill='none'
                                                xmlns='http://www.w3.org/2000/svg'
                                              >
                                                <rect
                                                  width='14'
                                                  height='15.5939'
                                                  transform='translate(0 0.703125)'
                                                  fill='white'
                                                  fill-opacity='0.01'
                                                />
                                                <path
                                                  fill-rule='evenodd'
                                                  clip-rule='evenodd'
                                                  d='M3 12.6983C3 13.3608 3.48215 13.8978 4.07692 13.8978C4.67169 13.8978 5.15384 13.3608 5.15384 12.6983C5.15384 12.0358 4.67169 11.4988 4.07692 11.4988C3.48215 11.4988 3 12.0358 3 12.6983ZM3 8.49994C3 9.16242 3.48215 9.69946 4.07692 9.69946C4.67169 9.69946 5.15384 9.16242 5.15384 8.49994C5.15384 7.83746 4.67169 7.30042 4.07692 7.30042C3.48215 7.30042 3 7.83746 3 8.49994ZM3 4.30157C3 4.96405 3.48215 5.5011 4.07692 5.5011C4.67169 5.5011 5.15384 4.96405 5.15384 4.30157C5.15384 3.6391 4.67169 3.10205 4.07692 3.10205C3.48215 3.10205 3 3.6391 3 4.30157ZM7.84616 12.6983C7.84616 13.3608 8.32831 13.8978 8.92308 13.8978C9.51785 13.8978 10 13.3608 10 12.6983C10 12.0358 9.51785 11.4988 8.92308 11.4988C8.32831 11.4988 7.84616 12.0358 7.84616 12.6983ZM7.84616 8.49994C7.84616 9.16242 8.32831 9.69946 8.92308 9.69946C9.51785 9.69946 10 9.16242 10 8.49994C10 7.83746 9.51785 7.30042 8.92308 7.30042C8.32831 7.30042 7.84616 7.83746 7.84616 8.49994ZM7.84616 4.30157C7.84616 4.96405 8.32831 5.5011 8.92308 5.5011C9.51785 5.5011 10 4.96405 10 4.30157C10 3.6391 9.51785 3.10205 8.92308 3.10205C8.32831 3.10205 7.84616 3.6391 7.84616 4.30157Z'
                                                  fill={
                                                    searchFilter.value ||
                                                    sortCode.value !=
                                                      'PlanOrder'
                                                      ? 'rgba(0,0,0,0.32)'
                                                      : 'rgba(0,0,0,0.8)'
                                                  }
                                                />
                                              </svg>
                                              <queryPlanComponent
                                                planSort={sortCode.value}
                                                planList={queryPlanList.value}
                                                showSubWarning={
                                                  mappingProps.showSubWarning
                                                }
                                                pageID={pageID.value}
                                                onOperate={planOperate}
                                                plan={element}
                                                v-model:modifyPlan={
                                                  modifyPlan.value
                                                }
                                                onPlanChange={async plan => {
                                                  onPlanChanged(plan);
                                                  // plan = await GetQueryPlanV2(plan.ID)
                                                  // modifyPlan.value =
                                                  //   Object.assign({}, plan);
                                                  // currectPlan.value =
                                                  //   Object.assign({}, plan);
                                                }}
                                              ></queryPlanComponent>
                                            </div>
                                          );
                                        },
                                      }}
                                    </draggable>
                                  </tm-list>
                                </div>
                                <div
                                  class='bottom'
                                  style={'    position: relative'}
                                >
                                  {/* <tm-button
                                    class='submit'
                                    onClick={() => {
                                      refTPopupProxy.value?.hide();
                                    }}
                                    type='primary'
                                    style='border:1px solid #DCDCDC;color: rgba(0, 0, 0, var(--t-color-opacity,0.9));height:32px'
                                    size='normal'
                                    style='width:50%;height:40px'
                                  >
                                    {$q.lang.label.cancel}
                                  </tm-button> */}
                                  <tm-button
                                    class='submit'
                                    color='primary'
                                    onClick={() => {
                                      checkPlan(true);
                                    }}
                                    type='primary'
                                    size='normal'
                                    style='width:100%;height:40px'
                                  >
                                    {$q.lang.queryPlan.mobile.run}
                                    {/* {$q.lang.label.ok} */}
                                  </tm-button>
                                </div>
                              </div>
                            );
                          }
                        })()}
                      </div>
                      {/* </q-tab-panel>
                  </tm-tabs> */}
                    </div>
                  </div>
                );
              }
            })()}
          </tm-dialog>
        </div>
      );
    };
    window.addEventListener('pageshow', function (event) {
      if (event.persisted) {
        // 页面是从缓存中加载的
        UpdateRepeatFilter();
      }
    });
    watch(
      () => mappingProps.visible,
      () => {
        nextTick(() => {
          scrollToCurrenct();
          initData();
          UpdateRepeatFilter();
        });
      },
    );

    onMounted(() => {
      scrollToCurrenct();
      // 初始检查
    });
    const checkScrollbar = () => {
      const scrollContainer = refQueryPlanM.value?.querySelector(
        '.plan_content_mobile',
      );
      if (!scrollContainer) return;
      if (scrollContainer.scrollWidth > scrollContainer.clientWidth) {
        // 如果有滚动条，添加类
        refQueryPlanM.value
          ?.querySelector('.plan_content_mobile_content')
          .classList.add('has-scrollbar');
      } else {
        // 如果没有滚动条，移除类
        refQueryPlanM.value
          ?.querySelector('.plan_content_mobile_content')
          .classList.remove('has-scrollbar');
      }
    };
    onBeforeUnmount(() => {
      removeEventListener_touch(
        document.querySelector(
          '.select_helper_popup.select_helper_popup_m.queryplanmanage',
        ),
      );
    });
    return renderSelecterHelper;
  },
});
